Question

我在streamgraph上找到了一个示例，不知道该图是否可以像折线图zoomable line chart一样缩放？我还没有找到“可缩放流图”之类的示例。那么在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比例尺和剪切路径，这需要更多工作。

流图可以缩放吗？

1 个答案: