javascript - 在 D3.js 树的中心和不同节点之间绘制不同颜色的 "strokes"

Question

这是我的代码。我正在尝试连接/绘制中心和不同节点之间的路径。现在我想为不同的路径制作不同颜色的 stroke 。我已经创建了一个颜色数组，对于哪个路径将是描边颜色。但是我不能用不同的颜色制作 stroke。

var lineFunction = d3.svg.line()
                     .x(function(d) { return d.x;})
                     .y(function(d) { return d.y;})
                     .interpolate("linear");
var lineGraph = vis.append("g")
                  .append("path")
                  .attr("d", lineFunction(CenterList))
                  .attr("stroke", function(d, i) { return ColorArr[i]; } )
                  .attr("stroke-width", 5)
                  .attr("fill", "none")
                  .attr("id", "viz");

ColorArr=black, black, red, red, black, black, black, red, black, red;

Answer 1

要为不同的线段设置不同的样式，它们必须是单独的线元素，而不是一条路径的所有部分。

但是，将折线图绘制为一系列线条元素会使代码复杂化。对于每个点，您不仅需要知道该点的数据，还需要知道前一个或下一个点(线的起点或终点)的数据。

我写了一个(更复杂的)用这种方式制作折线图的例子 for a previous SO question ，所以我能够快速为您调整它。

这是 fiddle :http://fiddle.jshell.net/4xZwb/3/

对于那个例子，我使用了一个“each”调用来对所有计算进行分组:

var lines = svg.append("g").attr("class", "plot").selectAll("line");
        //define a d3 selection consisting of <line> elements
        //that are grouped within g.plot

    lines = lines.data(data);  
        //tell the selection to make room for every point in the data array

    lines.enter().append("line");
        //add one <line> element for every data point

    lines.each(function(d,i){
        //for each line in the selection, this function will be called
        //with d equal to the data point and i equal to the index
        //and "this" equal to the <line> element

        var value = d;
        //y-value for current point 
        //(we're just using the raw number from the array,
        //normally it would be something like d.y or d[1] )

        //find next point
        var next = i+1; //x-position (just using index #)
        var nextValue = data[i+1]; //y-position

        if (isNaN(nextValue)){
            // there is no next value,
            // so repeat this point as the end of line
            //(line will have zero length, but the marker will show up)
            next = i;
            nextValue = value;
        }

        d3.select(this) //select this particular <line> element
                        //so that we can use d3 methods

            //set coordinates:
            .attr( 
                {x1: xScale(i),
                 y1: yScale(value),
                 x2: xScale(next),
                 y2: yScale(nextValue)}
                )

            //Set styles for this individual line segment
            //e.g., based on whether value is increasing
            //or decreasing, we can set stroke colour red or black
            .style("stroke", ( (value > nextValue) ?
                              "red" :
                              "black" )
                  );
    });//end of "each" call

但是，您也可以单独设置它们，就像在这个版本中:

lines = lines.data(data);

lines.enter().append("line");

lines.attr("x1", function(d,i){return xScale(i);})
.attr("x2", function(d,i){
    return xScale( (i+1 == data.length)?i:i+1);
})
.attr("y1", function(d,i){return yScale(d);})
.attr("y2", function(d,i){
    return yScale( (i+1 == data.length)?
                  d:data[i+1]);
})
.style("stroke", function(d,i){
    return ( (d > data[i+1]) ?
             "red" : "black" )
    });

http://fiddle.jshell.net/4xZwb/4/