How to make a d3.js chart responsive?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Define the SVG container
var svg = d3.select("#chart-container")
  .append("svg")
  .attr("class", "chart");

// Define a function to update the chart dimensions
function updateChart() {
  var width = parseInt(d3.select("#chart-container").style("width"));
  var height = width * 0.5; // Set the aspect ratio as needed

  svg.attr("width", width)
    .attr("height", height);

  // Update the chart elements based on the new dimensions
}

// Call the updateChart function when the browser window is resized
window.onresize = function() {
  updateChart();
};

// Call the updateChart function on page load
updateChart();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// Define the SVG container
var svg = d3.select("#chart-container")
  .append("svg")
  .attr("class", "chart")
  .append("g");

// Define a function to update the chart dimensions
function updateChart() {
  var width = parseInt(d3.select("#chart-container").style("width"));
  var height = width * 0.5; // Set the aspect ratio as needed

  svg.attr("width", width)
    .attr("height", height);

  // Update the chart elements based on the new dimensions
  // For example, you can adjust the scale range based on the new dimensions:
  xScale.range([0, width]);
  yScale.range([height, 0]);

  // Redraw the chart based on the new dimensions
  svg.selectAll(".bar")
    .attr("x", function(d) { return xScale(d.x); })
    .attr("y", function(d) { return yScale(d.y); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - yScale(d.y); });
}

// Call the updateChart function when the browser window is resized
window.addEventListener("resize", function() {
  updateChart();
});

// Initialize the chart
updateChart();