Javascript 如何根据轴值更改d3js中的线颜色？

如果X>100，我想更改此折线图的颜色，我想让它变为“红色”

是否有一种方法可以使用基于X值的笔划颜色样式中的条件

---

下面是我想到的一个快速示例：

让我们使用多行，而不是单个路径

我们需要将数据转换为具有以下属性：

[
  {
    x1: currentX,
    y1: currentY,
    x2: nextX,
    y2: nextY
  },
  ...
]

然后，我们可以根据数据使用条件

笔划
属性绘制它们：

var lines = svgContainer.selectAll('line')
    .data(lineData)
    .enter()
    .append('line')
    .attr('x1', function(d) { return d.x1; })
    .attr('y1', function(d) { return d.y1; })
    .attr('x2', function(d) { return d.x2; })
    .attr('y2', function(d) { return d.y2; })
    .attr("stroke", function (d) {
        return (d.x > 50) ? 'red' : 'blue';
    })
    .attr("fill", "none")
    .attr("stroke-width", 2);

下面是一个演示：


var lineData=[
{“x”：1，“y”：5}，
{“x”：20，“y”：20}，
{x:40，y:10}，{x:60，y:40}，
{x:80，y:5}，{x:100，y:60}，
{“x”：120，“y”：15}，{“x”：140，“y”：40}，
{“x”：160，“y”：25}，{“x”：180，“y”：20}，
{x:200，y:15}，{x:220，y:80}，
{“x:240，y:35}，{“x:260，y:60}
];
//这就是我们上面讨论的访问器函数
var lineFunction=d3.svg.line（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.插入（“线性”）；
//SVG容器
var svgContainer=d3.select（“body”）.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）；
lineData=lineData.map（函数（点、索引、arr）{
var next=arr[指数+1]，
上一个指数=arr[指数-1]；
返回{
x：第x点，
y：点，y，
x1:x点，
y1：点y，
x2：（下一个）？下一个x：上一个x，
y2：（下一个）？下一个。y：上一个
};
});
var lines=svgContainer.selectAll（'行'）
.数据（线条数据）
.输入（）
.append（'行'）
.attr（'x1'，函数（d）{返回d.x1；}）
.attr（'y1'，函数（d）{返回d.y1；}）
.attr（'x2'，函数（d）{返回d.x2；}）
.attr（'y2'，函数（d）{返回d.y2；}）
.attr（“笔划”，功能（d）{
返回（d.x>50）？“红色”：蓝色；
})
.attr（“填充”、“无”）
.attr（“笔划宽度”，2）
以下是另一种方法，在某些情况下可能会有所帮助：

我所做的就是使用
过滤器拆分数据：

var lineGraph1 = svgContainer.append("path")
        .attr("d", lineFunction(lineData.filter(function(d) {
            return d.x <= 100;
        })))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");
var lineGraph2 = svgContainer.append("path")
        .attr("d", lineFunction(lineData.filter(function(d) {
            return d.x >= 100;
        })))
        .attr("stroke", "red")
        .attr("stroke-width", 2)
        .attr("fill", "none");

var lineGraph1=svgContainer.append（“路径”）
.attr（“d”，lineFunction（lineData.filter）函数（d）{
返回d.x=100；
})))
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
我认为可以通过为线条定义渐变来实现这一点，而不是对线条进行样式化。
在这里查看此解决方案。

昨天我问了一个非常类似的问题，通过阅读D3文档并查看一些类似的示例，我能够让它正常工作

你想让一半的路径有不同的颜色吗？据我所知，这在当前版本的SVG中是不可能的。您是否考虑过绘制多条路径而不是一条路径？我想问题在于您一次提供了整个数据集（而不是单个数据段），因此在这种方法中很难找到相关的子数据段。我想到了两个快速的想法：（1）单独绘制线段，并在
stroke
属性中构建条件；（2）对数据应用过滤器并绘制两次（如上面@Oleg的注释所示），您可以使用渐变来完成。根据要更改颜色的轴上的值，使用
userSpaceOnUse
坐标定义渐变（实际上颜色会发生急剧变化），然后设置路径笔划以使用该渐变。请参阅类似的情况，但使用了一种模式，并提供了进一步的解释和工作示例的链接。我想用不同的颜色突出显示一个陡峭的渐变-我认为您的代码给了我一个开始-这是我在您的小提琴上的mod:。。。谢谢看起来当d.x时，它同时位于lineGraph1和lineGraph2上。这是故意的吗？（例如，我推荐
d.x<100
和
d.x>=100
）。当然，你可以稍微调整一下，你是对的。给定
笔划宽度
，在许多情况下会有重叠，因此我建议您考虑线条的顺序，如果您关心“覆盖”的颜色（在svg中，顺序很重要）。感谢@ryanm的输入！如果您想像我一样在CSS/SCS中保留颜色，这是最好的答案，因为您可以将数据数组更改为“class”，而不是d3代码中的“color”/“stop color”。它也不像公认的答案那样隔离数据行。
var lineGraph1 = svgContainer.append("path")
        .attr("d", lineFunction(lineData.filter(function(d) {
            return d.x <= 100;
        })))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");
var lineGraph2 = svgContainer.append("path")
        .attr("d", lineFunction(lineData.filter(function(d) {
            return d.x >= 100;
        })))
        .attr("stroke", "red")
        .attr("stroke-width", 2)
        .attr("fill", "none");

svg.append("linearGradient")
               .attr("id", "line-gradient")
               .attr("gradientUnits", "userSpaceOnUse")
               .attr("x1", 0).attr("y1", y(0))
               .attr("x2", 0).attr("y2", y(2))
               .selectAll("stop")
               .data(
                      [
                       {offset: "100%", color: "blue"},
                       {offset: "100%", color: "red"},
                      ]
                    )
                .enter().append("stop")
                        .attr("offset", function(d) { return d.offset; })
                        .attr("stop-color", function(d) { return d.color; });