d3 折线图在应用阈值时超出图表答案

【问题标题】：d3 line chart runs off the chart when threshold values are appliedd3 折线图在应用阈值时超出图表
【发布时间】：2017-07-05 03:31:48
【问题描述】：

我是 d3 的新手并使用折线图，我想在其中查看阈值 Fiddler 之间的图表。该图表适用于 y.domain([min,max])，因为我想用我自己的阈值查看图表，这条线从图表上跑了出来，我不知道为什么会这样。任何帮助深表感谢。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

如果您想避免图形区域溢出线条，您可能需要使用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/

如果这是您要找的，请告诉我。 :)

【讨论】：

【解决方案2】：

您得到一个损坏的图表的原因是，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 数组方法的文档链接。

希望这会有所帮助！ :)

【讨论】：

感谢您抽出宝贵时间解决此问题，并提供有关如何查找最小值和最大值的建议链接。数据数组和阈值将来自 API，我无法更改它。正如问题中提到的，我想查看介于阈值之间的图表，是生成路径还是 svg 区域？
@praveenuics 那么你想剪掉不在图表区域之间的线条吗？如果是，请阅读有关使用剪辑路径的信息。这可能会有所帮助。 :D