流图可以缩放吗？答案

【问题标题】：Can a streamgraph be zoomable?流图可以缩放吗？
【发布时间】：2018-12-20 08:05:53
【问题描述】：

我在streamgraph 上找到了一个示例，我想知道这个图表是否可以像折线图zoomable line chart 一样缩放？我还没有找到任何像“可缩放流图”这样的例子。那么这在 d3 中是否可行？

【问题讨论】：

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

【讨论】：

我认为他只想要水平 (x) 缩放，所以只需在转换字符串中设置 scaleX 属性，就会产生他想要的更接近的答案