Search code examples
javascripthtmld3.jsstream-graph

Can a streamgraph be zoomable?

I find a example on streamgraph and I wonder if this graph can be zoomable like line chart zoomable line chart? I have not found any example like "zoomable streamgraph". So is this possible in d3?

Solution

  • There is nothing special in a steamgraph. It is zoomable, just like any other SVG chart.

    For instance, I'm using this steamgraph created by Mike Bostock, adding just this:

    svg.call(d3.zoom().on("zoom", function() {
        svg.attr("transform", d3.event.transform)
    }))
    .append("g");

    And here is the result: https://bl.ocks.org/GerardoFurtado/raw/da06a5c751c442589ed9851ab3d823fc/bfd6883b30588bc76185614835409f5e1b40dc73/

    Or, if you want to zoom only on the x axis:

    svg = svg.call(d3.zoom().on("zoom", function() {
    svg.attr("transform", "translate(" + d3.event.transform.x + ",0) scale(" + d3.event.transform.k + ",1)");
}))
.append("g");

    And here is the result: https://bl.ocks.org/GerardoFurtado/raw/68eb354408724aafa77698640783b6f2/616094d7bee85ab33ca144518ce384e2064d4537/

    Those are simple demos, just to show you it's possible. However, a proper solution involves changing the x scale and clipping the paths, which demands more work.