如何摆脱D3JS中的重叠折线图

how to get rid of overlap line graph in d3js

本文关键字:重叠 折线图 何摆脱 D3JS      更新时间:2023-09-26

你能帮我删除折线图上的重叠线吗?这是一个动态图。因此,每当我想将图形的比例更改为更大的域时,整个路径都应该在那里。当我再次将比例更改为较小的比例时,我不想看到折线图或只看到覆盖我比例范围的线条。谢谢。

var data = [
    {"x":1, "y":1},
    ....
    ....
    ];
var line = d3.svg.line()
    .x(function(d) { return xScale(d.x); })
    .y(function(d) { return yScale(d.y); });

var path = svg.append("path")
    .data([data])
    .attr("d", line)
    .attr("stroke", "black");

单击示例输出的链接。

来自: 单击此处获取示例图像

收件人:单击此处查看示例输出图像

如注释中所述,使用剪辑路径。以下是一些有帮助的例子:

http://www.d3noob.org/2015/07/clipped-paths-in-d3js-aka-clippath.html

矩形内的 Svg 剪辑路径不起作用

http://bl.ocks.org/couchand/6399221

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath