2

我提取了一些数据，缩放后，我画了一堆圆圈。这很好用。

var gSet = graph1.selectAll("g").data(data).enter().append("g");
gSet.append("circle")
  .attr({ cx: posX, cy: posY, r: dotSize })
  .attr("class", "dataPoint");

现在，我想把这些点连起来。我见过的大多数例子都是关于条形的，而不是线条，所以我用谷歌搜索了更多的折线图并决定使用路径元素，就像这样。

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

屏幕上没有出现任何新内容，由于无知，我不知道该戳哪里看看出了什么问题。

  1. 我应该使用路径（还是line，polyline等更好的选择）？
  2. 我应该使用d属性还是有更合适的属性？
  3. 我应该应用d3.svg.line()函数还是有更流畅的方法？
4

1 回答 1

0

我碰巧做了一些与我认为你想要的类似的事情，所以我将它按原样粘贴到这个 jsfiddle中，它将向你展示一种连接线路的可能方法。这更像是一个父/子图，但这只是基于数据。您可以删除 parent 属性并将每个节点链接到前一个节点。

回答您的问题：

  1. 你可以使用路径，但如果你只想要直线，那就有点过分了。如果你的情况很简单，那么我推荐 line.

  2. 如果使用路径对象，则 d 属性将描述路径的形状。对于 D3js，人们经常使用 d 作为匿名方法的两个可选参数之一（d 是数据，i 是递增计数器）。

  3. 您可以使用 d3.svg.line() 函数来描述线条的形状和位置，但是如果您的数据像听起来那么简单，那么这可能是多余的 - 考虑只附加线条对象，如下面的代码所示。如果您需要“花哨的线条”，我的建议是走一条路，但这只是我的舒适区，可能还有其他方法。

对于我的方法，代码最终看起来像这样

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);
});
于 2016-01-28T17:24:12.660 回答