javascript - 流图可以缩放吗？

Question

我在流图上找到了一个例子，我想知道这个图是否可以像折线图一样缩放折线图？我还没有找到像“可缩放流图”这样的例子。那么这在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 比例和裁剪路径，这需要更多的工作。