使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

在代码中，您已设置了宽度，高度和边距为固定值。 如果要让图形响应，则必须注册一个调整大小事件并以适当的宽度和高度重绘。