在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

看一下以下三个jsFiddles。该解决方案的关键思想是@AmeliaBR所说。彻底研究这三个图中的链接实现（这很简单）。我提取了代码中最重要的部分。

Red only

.link_dashed {
    fill: none;
    stroke: #ff0000;
    stroke-width: 1.5px;
    stroke-dasharray: 0,20,20,30,10,10,10;
}

Black only

.link_dashed {
    fill: none;
    stroke: #000000;
    stroke-width: 1.5px;
    stroke-dasharray: 20,20,30,10,10,10,0;
}

Red and Black

.link_dashed {
    fill: none;
    stroke: #ff0000;
    stroke-width: 1.5px;
    stroke-dasharray: 0,20,20,30,10,10,10;
}
.link_dashed2 {
    fill: none;
    stroke: #000000;
    stroke-width: 1.5px;
    stroke-dasharray: 20,20,30,10,10,10,0;
}

Answer 2

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

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

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

这是小提琴：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/