使D3图形响应

Question

我有几个用D3制作的图形，但是当我想在小型设备上显示它们时遇到了问题。它们在左右两侧都被切断，我看不到它们。

我不知道如何解决它，我试图在屏幕尺寸很小但无法通过CSS通过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

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