[英]Can a streamgraph be zoomable?
I find a example on streamgraph and I wonder if this graph can be zoomable like line chart zoomable line chart ? 我在流图上找到了一个示例,并且不知道此图是否可以像折线图一样缩放 。 I have not found any example like "zoomable streamgraph".
我还没有找到“可缩放流图”之类的示例。 So is this possible in d3?
那么在d3中有可能吗?
There is nothing special in a steamgraph. 蒸汽记录仪中没有什么特别的。 It is zoomable, just like any other SVG chart.
就像任何其他SVG图表一样,它是可缩放的。
For instance, I'm using this steamgraph created by Mike Bostock, adding just this: 例如,我正在使用Mike Bostock创建的这张蒸汽照片 ,只需添加以下内容:
svg.call(d3.zoom().on("zoom", function() {
svg.attr("transform", d3.event.transform)
}))
.append("g");
And here is the result: https://bl.ocks.org/GerardoFurtado/raw/da06a5c751c442589ed9851ab3d823fc/bfd6883b30588bc76185614835409f5e1b40dc73/ 结果如下: https : //bl.ocks.org/GerardoFurtado/raw/da06a5c751c442589ed9851ab3d823fc/bfd6883b30588bc76185614835409f5e1b40dc73/
Or, if you want to zoom only on the x axis: 或者,如果只想在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");
And here is the result: https://bl.ocks.org/GerardoFurtado/raw/68eb354408724aafa77698640783b6f2/616094d7bee85ab33ca144518ce384e2064d4537/ 结果是这样的: https : //bl.ocks.org/GerardoFurtado/raw/68eb354408724aafa77698640783b6f2/616094d7bee85ab33ca144518ce384e2064d4537/
Those are simple demos, just to show you it's possible. 这些都是简单的演示,只是为了向您展示它的可能性。 However, a proper solution involves changing the x scale and clipping the paths, which demands more work.
但是,适当的解决方案包括更改x比例尺和剪切路径,这需要更多工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.