流图可以缩放吗

Question

我在streamgraph上找到了一个例子，我想知道这个图是否可以像折线图一样缩放？我还没有找到任何像"可缩放流图"这样的例子。那么这在d3中可能吗？

Answer 1

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

例如，我使用Mike Bostock创建的蒸汽图，只添加了以下内容：

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比例和剪裁路径，这需要更多的工作。