在 D3.js 树中的中心和不同节点之间绘制不同颜色的“笔触”

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

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

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

我已经为之前的 SO 问题编写了一个（更复杂的）以这种方式制作折线图的示例，因此我能够快速为您调整它。

这是小提琴：http : //fiddle.jshell.net/4xZwb/3/

例如，我使用“每个”调用对所有计算进行分组：

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/