0

我有一个简单的树布局示例，我希望将源节点和目标节点设置为值

数据是这样的：

   var Data = {"name" : "A", "info" : "tst", "childrens" : [
      {"name" : "A1", x:100, y:100 },
      {"name" : "A2", x:50, y:400 },
      {"name" : "A3", x:50, y:100 },
      {"name" : "A311", x:350, y:120 },
      {"name" : "A312", x:250, y:170 },
      {"name" : "A312", x:175, y:200 }

    ]};

如您所见，我已经为每个节点定义了 x 和 y 值，以将它们定位在我想要的位置。

但是，它似乎对布局没有任何影响。

我试图将投影更改为：

            translate(" + d.x + "," + d.y + ")"

我也尝试更改节点变量，但它似乎与我在投影上更改它具有相同的效果。

我想知道是否可以使用 treelayout 设置位置，但这是不允许的。

另外，我希望使用 svg.symbol，而不是使用 svg:circle：

   node.append("path")
       .attr("d", d3.svg.symbol().type(circle))
       .attr("transform", "translate(0,0)")

然而，相反，它只显示线条，没有文字 - 不明白为什么。

所以基本上我试图定位孩子和我选择的根。

任何帮助或建议将不胜感激。 http://jsfiddle.net/3twUr/2/

编辑：

var line = d3.svg.diagonal().data(data).enter()

    .source({x: d.x, y: d.y})
    .target({x: d.x, y: d.y});

    svg.append("path")
        .attr("fill", "none")
        .attr("stroke", "black")
        .attr("d", line);

     var pos = [{source: "A" ,target: 'A1'},
                {source: "A" , target: 'A2'} ];
4

1 回答 1

1

树布局（以及大多数其他布局）的重点在于它为您确定节点的位置。您尝试做的事情完全不受支持。

鉴于您已经有了节点位置，听起来简单地将符号和线条放置在您想要的位置会容易得多。也就是说，像

svg.selectAll("circle").data(Data.childrens)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; });

同样对于链接，您需要自己计算。听起来您想将父节点链接到它们的子节点，所以这将相对简单。

这种方法还具有您可以自由使用所需的任何节点/链接样式的优点。

于 2013-04-23T20:57:57.877 回答