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

本文介绍了绘制不同的彩色“笔画”在D3.js树中的中心和不同节点之间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这是我的代码。我试图连接/绘制中心和不同节点之间的路径。现在我想为不同的路径做一个不同的彩色 stroke 。我创建了一个颜色数组，为哪个路径将是笔触颜色。但是我不能让笔画以不同的颜色。

Here is my code. I am trying to connect/draw a path between center and different nodes. Now I want to make a different colored stroke for a different path. I have created an array of color that for which path what will be stroke color. But I can't make the stroke in a different color.

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;

推荐答案

单独的线元素而不是一个路径的所有部分。

To style different line segments differently, they have to be separate line elements instead of all part of one path.

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

However, drawing a line graph as a series of line elements complicates the code. For every point, you not only need to know the data at that point, you also need to the data for the previous or next point (the start or end of the line).

我写了一个（更复杂的）示例，通过这种方式获取以前的SO问题，

I had written up a (more complicated) example of making a line graph this way for a previous SO question, so I was able to quickly adapt it for you.

这里是小提琴： fiddle.jshell/4xZwb/3/

对于这个例子，我使用了一个each调用以组合所有的计算：

For that example, I used an "each" call to group all the calculations:

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

fiddle.jshell/4xZwb/4/