Question

我是d3的新手并使用折线图，我想要在阈值Fiddler之间查看图表。该图表与y.domain（[min，max]）一起工作正常，因为我想查看具有我自己的阈值的图表，该线从图表中运行，我不知道为什么会发生这种情况。任何帮助深表感谢。

Answer 1

你得到一个破碎的图表的原因是，4月26日之后的值小于75，这是你定义的最小值。因此图形实际上是绘图，但是您无法看到线条，因为它位于您定义的svg区域之下。

这是我的2美分。

只需使用正确的值更新数据即可。这样您就可以在最后查看数据了。
```
{  
    date: "1-May-12",  
    close: "90.13"  
}
```
或

只需将min值更新为最低预期值。

var thresholdValues = {
    minValue: 50,
    maxValue: 100
};

这就是我所做的，似乎工作正常。以下是相同http://jsfiddle.net/vxo1qsf9/1/

的小提琴链接

如果要从数据中自动查找最小值和最大值，请使用d3的本机函数d3.extent()，它返回包含该数组的min和max值的数组，或者您可以还可以尝试使用d3.min()和d3.max()分别找到最小值和最大值。

Here是d3数组方法的文档链接。

希望这有帮助！：）

Answer 2

如果您想避免图表区域上的线条出血，您可能需要使用clip-path。我稍微调整了你的代码并添加了剪辑路径。

svg.append("clipPath")
   .attr("id", "clip-path")
   .append("rect")
   .attr("width", width)
   .attr("height", height);

svg.append("path") // Add the valueline path.
   .attr("d", valueline(data))
   .attr("clip-path", "url(#clip-path)");

以下是相同的JSFiddle链接：http://jsfiddle.net/vxo1qsf9/2/

如果您正在寻找，请告诉我。：）

应用阈值时，d3折线图在图表上运行

2 个答案: