使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

在代碼中，您已設置了寬度，高度和邊距為固定值。 如果要讓圖形響應，則必須注冊一個調整大小事件並以適當的寬度和高度重繪。