Question

如果X＆gt;我想更改此折线图的颜色100我希望它变成＆＃34;红色＆＃34;

有没有办法可以根据X的值在笔画颜色样式中使用条件？

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

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

enter image description here

Answer 1

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

我所做的就是使用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");

Answer 2

以下是我提出的一个简单示例：

不是单一路径，而是使用多行。

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

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

然后我们可以使用基于数据的条件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);

这是一个演示：

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>

Answer 3

我认为您可以通过为线条定义渐变而不是样式化来实现此目的。在这里查看此解决方案。 change color of line graph based on data (red for above threshold of say 0 , and blue for below 0)

昨天我问了一个非常类似的问题，并且能够通过阅读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; });

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

3 个答案: