使D3图形响应

Question

I have a couple of graphs made with D3 but I have problems when I want to display them on small devices. They are cut off on left and right sides and I cannot see them properly.

I have no idea how to fix it, I have tried to change the dimensions of the canvas through the CSS when the screen size is small but I could not. I hope you can help me. I guess I have to introduce some change in the CSS and in the bit of code where I set the size of the graph.

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 + ")")

Thanks

Answer 1

In your code, you have set the width, height and margins fixed. If you want your graph responsive, you have to register a resize event and redraw with appropriate width and height.