使D3图形具有响应性

Question

我有几张用D3制作的图，但当我想在小型设备上显示它们时，我会遇到问题。它们的左右两侧都被切断了，我无法正确地看到它们。

我不知道如何修复它，当屏幕大小很小时，我试图通过CSS更改画布的尺寸，但我做不到。我希望你能帮助我。我想我必须在CSS和设置图形大小的代码中引入一些更改。

var margin = {top: 100, right: 111, bottom: 50, left: 120},
    width = 960 - margin.left - margin.right,
    height = 560 - margin.top - margin.bottom;

var svgbar = d3.select("#barforest").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

感谢

Answer 1

在您的代码中，您已经固定了宽度、高度和边距。如果你想让你的图形响应，你必须注册一个调整大小的事件，并用适当的宽度和高度重新绘制。