D3.js转换后树中的直链接 [英] D3.js Straight links in tree after transformation

问题描述

我正在尝试使我的树在父节点和子节点之间具有直接链接. 我现在有直接链接，但链接未连接到正确的位置. 我认为这可能是因为旋转发生了转换并转换为节点，而x和y并没有发生任何改变.

I am trying to make my tree have a straight links between the parent node and the children nodes. I have straight links now but the links are not connecting to the right places. I think this may be because there is a transformation of rotation and translate to the nodes and the x and y didn't change somehow.

我尝试按照此问题的答案进行操作，但结果相同. D3:替代d3.svg.diagonal()与d3.svg.line()

I have tried following the answer in this question but result is the same. 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");

屏幕截图

推荐答案

我终于开始使用它.解决方案非常奇怪. 线没有投影方法，对角线也没有. 因此，重置x1，x2，y1，y2的位置时需要像对角投影一样进行一些微调.

I finally got it to work.. The solution is quite bizarre. There is no projection method for line as there is for diagonal. So when resetting the positions of x1,x2,y1,y2 needs a little bit tuning just like the diagonal projection.

我还必须像应用节点一样应用转换，但不进行转换.

Also I have to apply the transformation like how the nodes are applied but without the translation.

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

这篇关于D3.js转换后树中的直链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！