javascript - 使用 D3 在 SVG 中制作条形图后，它不适合整个 SVG

问题描述

我在 svg 中绘制标签并在内部添加适合特定 (x,y) 的倍数（使用 d3.js lib）从 svg 在滑块上的数据（使用 d3.js 库），（当我检查 svg 元素时这没问题，它是合适的）但是问题是元素不合适，虽然我可以在检查时看到宽度和高度：100%。证明

我的代码是：

private createSvg(): void {
    if (this.svg) {
        return;
    }
    this.svg = d3.select("figure#histogram")
        .classed("svg-container", true)
        .append("svg")
        .attr("width", '100%')
        .attr("height", '100%')
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 600 400")
        .classed("svg-content-responsive", true)
        .append("g")
        .attr("width", '100%')
        .attr("height", '100%')
}

请问有什么帮助吗？

标签： javascriptcssangulard3.jssvg

解决方案：您应该使用这条线来调整您的图表：

attr("viewBox", "0 0 600 400")

并且还要注意您为 xAxis 提供的范围，它应该包含适当的值！

javascript - 使用 D3 在 SVG 中制作条形图后，它不适合整个 SVG

问题描述

解决方案

推荐阅读