如何用线连接D3中的点?
How to connect dots in D3 with a line?
我提取了一些数据,在缩放之后,我画了一堆圆圈。这很好用。
var gSet = graph1.selectAll("g").data(data).enter().append("g");
gSet.append("circle")
.attr({ cx: posX, cy: posY, r: dotSize })
.attr("class", "dataPoint");
现在,我想把这些点联系起来。我见过的大多数例子都是关于条形的,而不是线条,所以我在谷歌上搜索了更多 line charts 并决定使用路径元素,就像这样。
var gSet = graph1.selectAll("g").data(data).enter().append("g");
gSet.append("circle")
.attr({ cx: posX, cy: posY, r: dotSize })
.attr("class", "dataPoint");
gSet.append("path")
.attr("d", d3.svg.line().x(posX).y(posY))
.attr({ "stroke": "yellow", "stroke-width": "1" });
屏幕上没有出现任何新内容,由于无知,我不知道该戳哪里看哪里出了问题。
- 我应该使用 path(还是 line、polyline 等更好选择)?
- 我应该使用 d 属性还是有更合适的属性?
- 我应该应用 d3.svg.line() 函数还是有更流畅的方法?
我碰巧做了一些与我认为您想要的类似的事情,所以我将按原样粘贴在 this jsfiddle 中,它会向您展示一种可能的连接方式。这个更像是一个 parent/child 图表,但这只是基于数据。您可以删除父节点 属性 并将每个节点 link 移至前一个节点。
回答您的问题:
你可以使用路径,但如果你只想要直线就有点矫枉过正了。如果你的情况很简单,那我推荐line.
如果使用路径对象,d 属性 将描述路径的形状。对于 D3js,人们经常将 d 作为两个可选参数之一用于匿名方法(d 是数据,i 是递增计数器)。
您可以使用 d3.svg.line() 函数来描述线条的形状和位置,但是如果您的数据听起来很简单,那么这可能有点矫枉过正 - 考虑一下附加线对象,如下面的代码所示。如果您需要 "fancy lines",我的建议是选择路径,但这只是我的舒适区域,可能还有其他方法。
对于我的方法,代码最终看起来像这样
var items = svg.selectAll("g").data(srcData).enter().append("g");
items.each(function(d, i){
d3.select(this).attr("transform","translate("+d.posx+","+d.posy+")");
if(d.parentid > 0)
d3.select(this).append("line")
.attr("x",0)
.attr("y",0)
.attr("x1",function(d){ return -1*(d.posx - parent(d.parentid).posx); })
.attr("y1",function(d){ return -1*(d.posy - parent(d.parentid).posy); })
.style("stroke",d.color)
.style("stroke-width",2);
d3.select(this).append("circle")
.attr("r",5)
.style("fill",d.color);
});
我提取了一些数据,在缩放之后,我画了一堆圆圈。这很好用。
var gSet = graph1.selectAll("g").data(data).enter().append("g");
gSet.append("circle")
.attr({ cx: posX, cy: posY, r: dotSize })
.attr("class", "dataPoint");
现在,我想把这些点联系起来。我见过的大多数例子都是关于条形的,而不是线条,所以我在谷歌上搜索了更多 line charts 并决定使用路径元素,就像这样。
var gSet = graph1.selectAll("g").data(data).enter().append("g");
gSet.append("circle")
.attr({ cx: posX, cy: posY, r: dotSize })
.attr("class", "dataPoint");
gSet.append("path")
.attr("d", d3.svg.line().x(posX).y(posY))
.attr({ "stroke": "yellow", "stroke-width": "1" });
屏幕上没有出现任何新内容,由于无知,我不知道该戳哪里看哪里出了问题。
- 我应该使用 path(还是 line、polyline 等更好选择)?
- 我应该使用 d 属性还是有更合适的属性?
- 我应该应用 d3.svg.line() 函数还是有更流畅的方法?
我碰巧做了一些与我认为您想要的类似的事情,所以我将按原样粘贴在 this jsfiddle 中,它会向您展示一种可能的连接方式。这个更像是一个 parent/child 图表,但这只是基于数据。您可以删除父节点 属性 并将每个节点 link 移至前一个节点。
回答您的问题:
你可以使用路径,但如果你只想要直线就有点矫枉过正了。如果你的情况很简单,那我推荐line.
如果使用路径对象,d 属性 将描述路径的形状。对于 D3js,人们经常将 d 作为两个可选参数之一用于匿名方法(d 是数据,i 是递增计数器)。
您可以使用 d3.svg.line() 函数来描述线条的形状和位置,但是如果您的数据听起来很简单,那么这可能有点矫枉过正 - 考虑一下附加线对象,如下面的代码所示。如果您需要 "fancy lines",我的建议是选择路径,但这只是我的舒适区域,可能还有其他方法。
对于我的方法,代码最终看起来像这样
var items = svg.selectAll("g").data(srcData).enter().append("g");
items.each(function(d, i){
d3.select(this).attr("transform","translate("+d.posx+","+d.posy+")");
if(d.parentid > 0)
d3.select(this).append("line")
.attr("x",0)
.attr("y",0)
.attr("x1",function(d){ return -1*(d.posx - parent(d.parentid).posx); })
.attr("y1",function(d){ return -1*(d.posy - parent(d.parentid).posy); })
.style("stroke",d.color)
.style("stroke-width",2);
d3.select(this).append("circle")
.attr("r",5)
.style("fill",d.color);
});