流图可以缩放吗？

Question

我在 streamgraph and I wonder if this graph can be zoomable like line chart zoomable line chart 上找到了一个例子？我还没有找到像 "zoomable streamgraph" 这样的例子。那么这在 d3 中可能吗？

Answer 1

蒸汽图中没有什么特别之处。它是可缩放的，就像任何其他 SVG 图表一样。

例如，我正在使用由 Mike Bostock 创建的 this steamgraph，仅添加以下内容：

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

结果如下：https://bl.ocks.org/GerardoFurtado/raw/da06a5c751c442589ed9851ab3d823fc/bfd6883b30588bc76185614835409f5e1b40dc73/

或者，如果您只想在 x 轴上缩放：

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

结果如下：https://bl.ocks.org/GerardoFurtado/raw/68eb354408724aafa77698640783b6f2/616094d7bee85ab33ca144518ce384e2064d4537/

这些是简单的演示，只是为了向您展示这是可能的。但是，正确的解决方案涉及更改 x 比例和裁剪路径，这需要更多的工作。

流图可以缩放吗？

Can a streamgraph be zoomable?

javascript

html

d3.js

stream-graph