Javascript 更改数据点上方的d3.js线图笔划颜色

如果数据值高于某个值，是否可以更改线条的颜色

我的折线图按我喜欢的方式工作，但我不知道如何做造型，有什么想法吗

var m=[10,10,10,10]；//边距
var w=400；//宽度
var h=200；//高度
var数据=[146.45,146.43,146.45,146.47,146.44,146.48,146.44,146.52,146.59,146.71,146.74,146.68,146.66,146.64,146.65,146.68,146.58,146.57,146.54,146.5,146.45,146.51,146.57,146.6,146.62,146.63,146.51,146.44,146.36,146.33,146.34,146.3,146.34,146.33,146.35,146.31,146.4,146.44,146.44,146.44,146.47,146.37,146.41,146.4,146.44,146.5,146.51,146.54,146.54,146.5,146.49,146.45,146.45,146.47,146.46,146.47,146.45,146.59,146.71,146.71,146.7,146.68,146.74,146.77,146.78,146.71,146.73,146.72,146.71,146.73,146.73,146.73,146.75,146.72,146.66,146.65,146.72,146.75,146.77,146.8,146.82,146.83,146.84,146.85,146.86,146.9,146.91,146.9,146.86,146.89,146.89,146.89,146.88,146.91,146.89,146.89,146.9,146.91,146.95,146.95,146.93,146.95,147,146.98,147,147.01,147.03,147.05,147.07,147.08,147.07,147.04,147.02,146.99,146.98,146.98,147,147,147.02,147.04,147.06,147.06,147.12,147.13,147.13,147.15,147.16,147.12,147.07,147.06,147.03,147.03,147.02,147.02,147.06,147.07,147.07,147,147,146.99,147,146.91,146.91,146.87,146.87,146.86,146.88,146.87,146.85,146.87,146.89,146.91,146.88,146.84,146.87,146.88,146.89,146.9,146.92,146.94,146.94,146.92,146.9,146.87,146.84,146.8,146.78,146.8,146.78,146.72,146.73,146.75,146.76,146.77,146.78,146.77,146.76,146.85,146.9,146.9,146.92,146.97,146.96,146.97,146.96,146.89,146.91,146.89,146.91,146.93,146.96,146.97,147.03,147.02,146.98,146.99,147,146.99,147,147,147,146.97,146.96,146.97,146.99,146.99,146.98,146.95,146.95,146.93,146.9,146.88,146.85,146.87,146.84,146.85,146.87,146.87,146.84,146.81,146.82,146.82,146.8,146.76,146.74,146.67,146.66,146.66,146.68,146.63,146.69,146.72,146.77,146.79,146.85,146.85,146.8,146.77,146.72,146.86,146.86,146.86,146.91,146.86,146.78,146.71,146.67,146.65,146.63,146.58,146.55,146.5,146.48,146.44,146.37,146.4,146.39,146.36,146.34,146.35,146.4,146.33,146.34,146.32,146.34,146.35,146.33,146.34,146.3,146.35,146.37,146.33,146.33,146.33,146.33,146.26,146.28,146.23,146.25,146.27,146.29,146.27,146.29,146.27,146.22,146.21,146.27,146.31,146.32,146.34,146.33,146.39,146.38,146.33,146.3,146.3,146.23,146.19,146.17,146.16,146.15,146.19,146.22,146.21,146.24,146.3,146.29,146.27,146.23,146.21,146.15,146.13,146.13,146.13,146.12,146.12,146.15,146.08,146.07,146.04,145.97,145.91,145.91,145.94,145.95,145.94,145.92,145.89,145.84,145.85,145.72,145.72,145.74,145.77,145.77,145.72,145.67,145.65,145.6,145.55,145.52,145.59,145.6,145.63,145.67,145.71,145.71,145.75,145.74,145.73,145.75,145.73,145.78,145.75,145.75,145.77,145.78,145.78,145.83,145.82,145.84,145.84,145.74,145.66,145.69,145.71,145.66,145.66,145.7,145.67,145.73,145.72,145.66,145.49,145.54,145.61,145.65,145.81,145.81,145.87,145.89,145.91,145.79,145.74,145.66,145.78,145.75,145.69,145.88,145.39];
var x=d3.scale.linear（）.domain（[0，data.length]）.range（[0，w]）；
变量y=d3.scale.linear（）.域（[d3.min（数据），d3.max（数据）]）.范围（[h，0]）；
var line=d3.svg.line（）
.x（函数（d，i）{
返回x（i）；
})
.y（函数（d）{
返回y（d）；
})
var-graph=d3.选择（“#graph”）.追加（“svg:svg”）
.attr（“宽度”，w+m[1]+m[3]）
.attr（“高度”，h+m[0]+m[2]）
.append（“svg:g”）
.attr（“转换”、“平移”（+m[3]+”、“+m[0]+”））；
graph.append（“svg:path”）.attr（“d”，行（数据））；

路径{
笔画：钢蓝；
笔画宽度：1.5；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
.线路{
填充：无；
笔划：url（#线条渐变）；
笔画宽度：2px；
}

简短的回答是不，这是不可能的。在像您这样的折线图中，“线”实际上是一个
元素，这意味着它只有一个笔划颜色，只有一个笔划宽度，只有一个填充等等

解决您的问题的经典SVG解决方案是使用。我相信不久会有人发布使用该解决方案的答案

然而，我想提出一个基于D3的解决方案（如果您愿意，也可以是基于数据的解决方案），尽管这不是一个完美的解决方案

我的解决方案是附加两个不同的路径，为每个路径过滤数据。在您的情况下，我为每个路径过滤
146.5
上方和下方的数据：

graph.append("svg:path").attr("d", line(data.map(function(d) {
    return d < 146.5 ? d : null
}))).attr("stroke", "blue");

graph.append("svg:path").attr("d", line(data.map(function(d) {
    return d >= 146.5 ? d : null
}))).attr("stroke", "red");

路径{
笔画宽度：1.5；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
.线路{
填充：无；
笔划：url（#线条渐变）；
笔画宽度：2px；
}