Question

我需要使我的d3 js图表具有响应性，即在用户调整窗口大小时缩放图表。我尝试了svg的属性“ viewbox”和“ preserveaspectratio”，但是没有运气。这是我的fiddle

var svg = d3.select("#chart1").append("svg")
    .call(zoom)
    .attr("class", "chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
    .attr('viewBox','0 0 '+Math.min(pWidth,height)+'       '+Math.min(pWidth,height))
.attr('preserveAspectRatio','xMinYMin');

Answer 1

从width元素中删除height和svg属性。

添加.attr('preserveAspectRatio','xMinYMin');和.attr("viewBox", '0 0 ' + width + ' ' + height)

相关代码：

var svg = d3.select("#chart1").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", '0 0 ' + width + ' ' + height)
    .call(zoom)
    .attr("class", "chart")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

如何使D3图表具有响应性？

1 个答案: