9951 explained code solutions for 126 technologies

javascript-d3How do I create a zoomable chart using d3.js?

Creating a zoomable chart with d3.js requires the following steps:

  1. Create an SVG element in the HTML page to draw the chart.

    <svg id="chart" width="900" height="500"></svg>
  2. Create a margin object to position the chart within the SVG element.

    var margin = {top: 20, right: 20, bottom: 30, left: 40};
  3. Create a scale object to map the data to the chart area.

    var x = d3.scaleLinear().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);
  4. Create an axis object to draw the axes.

    var xAxis = d3.axisBottom(x);
    var yAxis = d3.axisLeft(y);
  5. Create a zoom object to enable zooming.

    var zoom = d3.zoom().on("zoom", zoomed);
  6. Create a zoom function to update the chart when zooming.

    function zoomed() {
    //update the x and y scale according to the zoom transform
    //redraw the axes
    //redraw the chart
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", x.bandwidth())
    .attr("height", function(d) { return height - y(d.y); });
  7. Finally, attach the zoom object to the SVG element.


Helpful links

Edit this code on GitHub