javascript - 具有使 d3 图表响应的像素值的 View 框无法正常工作

Question

我正在尝试让 d3 图表更具响应性。所以我使用了带有像素值的 viewbox 但它不起作用检查这个 non responsive jsfiddle 。如果我将 width 和 height 设置为 100% 如下所示，那么它是响应式检查 responsive jsfiddle

var svg = d3.select('.chart-container').append("svg")
        .attr("width", '100%')
        .attr("height", '100%')
        .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )

这不起作用，如非响应式 jsfiddle

中所示

var svg = d3.select('.chart-container').append("svg")
        .attr("width", 200)
        .attr("height", 200)
        .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )

我只想在 d3 中自定义 width 和 height，而不是通过设置 height 和 width 在 css 中div 并且我不想使用任何 jquery 函数。

Answer 1

如果你去掉高度和宽度属性，那么它就会变得响应式

 var svg = d3.select('.chart-container').append("svg")
    .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
    .attr('preserveAspectRatio','xMinYMin')
    .append("g")
    .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");