D3.js 转换后树中的直接链接

Question

我试图让我的树在父节点和子节点之间有一个直接的链接。 我现在有直接链接，但链接没有连接到正确的位置。 我认为这可能是因为存在旋转转换并转换到节点，而 x 和 y 并没有以某种方式发生变化。

我已经尝试按照这个问题的答案，但结果是一样的。 D3: Substituting d3.svg.diagonal() with d3.svg.line()

 var lines = svg.selectAll('line')
      .data(links)
      .enter()
      .append('line')
      .attr('stroke','#000')

lines.attr('x1',function(d){return d.source.x })
    .attr('y1',function(d){return d.source.x})
    .attr('x2',function(d){return d.target.x })
    .attr('y2',function(d){return d.target.y })

这里是完整的代码：

    var diameter = 1000;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 100])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

 // var diagonal = d3.svg.diagonal.radial()
 // .projection(function(d) { 

 //  return [d.y, d.x ]; })

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter )
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");


d3.json("flare.json", function(error, root) {

  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
      .data(links)
      .enter().append("path")
      .attr("class", "link")


   var lines = svg.selectAll('line')
          .data(links)
          .enter()
          .append('line')
          .attr('stroke','#000')

    lines.attr('x1',function(d){return d.source.x })
        .attr('y1',function(d){return d.source.x})
        .attr('x2',function(d){return d.target.x })
        .attr('y2',function(d){return d.target.y })


  var node = svg.selectAll(".node")
      .data(nodes)
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90 ) + ")translate(" + d.y + ")"; })

  node.append("circle")
      .attr("r", 10);


  node.append("text")
      .attr("dy", ".81em")
      .attr("text-anchor", function(d) {
       return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(20)" : "rotate(180)translate(-20)"; })
      .text(function(d) { return d.name; });

});

d3.select(self.frameElement).style("height", diameter - 150 + "px");

截图

Answer 1

我终于让它工作了.. 解决方案很奇怪。 直线没有投影方法，对角线也有投影方法。 所以在重置 x1,x2,y1,y2 的位置时，需要像对角投影一样进行一点调整。

我还必须像应用节点一样应用转换，但没有翻译。

var link = svg.selectAll("link")
   .data(links)
   .enter().append("path")
   .attr("class", "link")



var lines = svg.selectAll('line')
      .data(links)
      .enter()
      .append('line')
      .attr('stroke','#000')


lines.attr('x1',function(d){return d.source.y})
    .attr('y1',function(d){return d.source.x/180*Math.PI})
    .attr('x2',function(d){return d.target.y })
    .attr('y2',function(d){return d.target.x/180*Math.PI})

    // lines.attr("transform", function(d) {
    //  return "rotate(" + (d.source.x - 90 ) + ")translate(" + d.source.y + ")"; })

   lines.attr("transform", function(d) {      
     return "rotate(" + (d.target.x - 90 ) + ")"; })