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

截图 screenshot1

screenshot2

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

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

1 个答案: