如何解决折线图放大的多系列d3js v5图表
我正在尝试实现d3js折线图的缩放。它适用于单系列线路,但不适用于多系列线路。这是svg缩放功能
function zoom(svg) {
var extent = [
[margin.left,margin.top],[width - margin.right,height - margin.top]
];
var zooming = d3.zoom()
.scaleExtent([1,3])
.translateExtent(extent)
.extent(extent)
.on("zoom",zoomed);
svg.call(zooming);
function zoomed() {
x.range([margin.left,width - margin.right]
.map(d => d3.event.transform.applyX(d)));
// for single series
svg.select(".path")
.attr("d",line);
svg.select(".x-axis")
.call(d3.axisBottom(x)
.tickSizeOuter(0));
}
}
还可以正常使用fiddle,在该演示中,您可以在鼠标滚动时清楚地看到,只有一个线系列被缩放,而另一个固定不变。不知道该如何解决。需要D3忍者的帮助。
解决方法
通常,我们将在数组[{line: line,data: data1},{line: line100,data: data2}]
中使用数据和行生成器函数,并用selectAll()
绑定到每条SVG行。
但是因为两行的数据都是相同的,所以我们可以采取一些捷径,只使用行生成器,每次都使用相同的数据:
svg.selectAll(".path")
.data([line,line100])
.join("path")
.attr("d",lineGenerator => lineGenerator(data));
这将选择所有现有的path
元素,将一个行生成器绑定到每个元素,然后使用我们绑定的行生成器来生成新路径using the data join。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。