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

How to change line color in d3js according to axis value?

提问by JPC

I want to change color for this line chart if X > 100 I want it to turn "red"

如果 X > 100 我想改变这个折线图的颜色我想让它变成“红色”

Is there a way I can use condition within stroke color style based on value of X ?

有没有一种方法可以根据 X 的值在笔触颜色样式中使用条件？

http://jsfiddle.net/iamjeannie/b445svob/1/enter link description here

http://jsfiddle.net/iamjeannie/b445svob/1/在此处输入链接描述

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}
               ];

 //This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

回答by Pinguin Dirk

Here's another way, maybe in some instances that might help:

这是另一种方式，也许在某些情况下可能会有所帮助：

All I do is split the data by using a filter:

我所做的就是使用 a 拆分数据filter：

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");

回答by Oleg

Here's a quick example that I've come up with:

这是我想出的一个快速示例：

Instead of a single path, let's use multiple lines.

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

We'll need to convert our data to have the following properties:

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

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

Then we can draw them with a conditional strokeattribute based on data:

然后我们可以使用stroke基于数据的条件属性绘制它们：

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);

Here's a demo:

这是一个演示：

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}
               ];
 
 //This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

lineData = lineData.map(function (point, index, arr) {
    var next = arr[index + 1],
        prev = arr[index - 1];
    return {
        x: point.x,
        y: point.y,
        x1: point.x,
        y1: point.y,
        x2: (next) ? next.x : prev.x,
        y2: (next) ? next.y : prev.y
    };
});

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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

回答by Jasmeet Singh

I think you can achieve this by defining gradient for the line instead of styling it. Check out this solution here. change color of line graph based on data (red for above threshold of say 0 , and blue for below 0)

我认为您可以通过为线条定义渐变而不是样式来实现这一点。在此处查看此解决方案。 根据数据更改折线图的颜色（红色表示高于阈值 0 ，蓝色表示低于 0）

I asked a very similar question yesterday and was able to get it working by reading D3 documentation and looking at some samples like this one https://bl.ocks.org/mbostock/3970883

我昨天问了一个非常相似的问题，并且能够通过阅读 D3 文档并查看一些这样的示例来使其工作 https://bl.ocks.org/mbostock/3970883

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; });