Tree D3树源y堆叠位置，不指向一个点_Tree_D3.js

Tree D3树源y堆叠位置，不指向一个点

tree d3.js

Tree D3树源y堆叠位置，不指向一个点,tree,d3.js,Tree,D3.js,目前我有以下树布局： ! 我不想让我所有的链接都打在右边的圆圈上，而是希望它们堆叠起来，这样每一行都可以找到自己的圆圈。如图所示： ! 我开始修改d3.svg.diagonal，但这并没有奏效，我能做什么 inDiagonal = d3.svg.diagonal() .projection(function (d) { return[-d.y, d.x]}); 谢谢 --------用代码更新区域 <body> <div id="viz"></div&g

目前我有以下树布局：

我不想让我所有的链接都打在右边的圆圈上，而是希望它们堆叠起来，这样每一行都可以找到自己的圆圈。如图所示：

我开始修改d3.svg.diagonal，但这并没有奏效，我能做什么

  inDiagonal = d3.svg.diagonal()
  .projection(function (d) { return[-d.y, d.x]});

谢谢

--------用代码更新区域

<body>
<div id="viz"></div>

<script type="text/javascript"> 

  var w = 925;
  var h = 600;
  var padding = 100;

  var vis = d3.select("#viz");

  var visInterior = vis.append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate("+w+","+15+")"); 

  var intree = d3.layout.tree()
      .size([h,((w)-padding)])
      .children(function children(d) { return d.children });

  var pathScale = d3.scale.linear()
      .domain([0,88622279.00])
      .range([1.5,35]);    

  inflowWrap = visInterior.append("svg:g").attr("id", "inflowWrap");

  d3.json("TotalSell.json", function(data) {

    inflow = data.children[0];

    var inNodes = intree.nodes(inflow);
    var inLinks = intree.links(inNodes);

    inDiagonal = d3.svg.diagonal()
      .projection(function (d,i) { return[-d.y, d.x]}); 

    var inpathNode = inflowWrap.selectAll(".inLink")  
      .data(inLinks)
      .enter()
      .append("g")
      .attr("id", function(d) { return d.target.name  })
      .attr("class", "link" );

     inpathNode.append("path")
      .attr("class", function(d,i) { 
      if (pathScale(d.source.children[i].number)<1) { return "pathOff" } else { return "pathOn"}  })     
      .style("stroke-width", function(d,i) { return pathScale(d.source.children[i].number) })
      .attr("d", inDiagonal);

    var inNode = inflowWrap.selectAll(".inNode")
      .data(inNodes)
      .enter()
      .append("g")
      .attr("id", function(d) { return "nodeTxt_"+d.name })
      .attr("transform", function(d) { return "translate("+ -d.y + ","+ d.x +")"})
      .style("fill", "#808080");  

    inNode.append("text")
      .attr("dx", function(d) { return d.name ? -15 : 15; })
      .attr("dy", 5)    
      .attr("text-anchor", function(d) { return d.name ? "end" : "start"; })
      .attr("class", function(d) { return d.name+"-text"})
      .text(function(d) { return d.name});
  })

 d3.select("#viz svg g").append("circle")
    .attr("cx", -10)
    .attr("cy", h/2)
    .attr("r", "10px");


</script>
</body>

看起来您需要为您的行设置不同的目标坐标。lars：这会在json中完成吗？或者我可以得到相应的线的高度和空间吗？你必须在这里给我更多的细节。你的代码是什么，你的数据是什么？我已经更新了原始帖子，加入了我的代码，谢谢。你不能用树形布局来实现这一点——这不是它的目的。您必须手动移动线或更改布局实现。

{
  "name": "inflowz",
  "children": [
    {
      "name": "Company",
      "date": "01/02/13",
      "children": 
        [
          {"name":"one","number":88622279.00},
          {"name":"two","number":3707732.64},
          {"name":"three","number":4103611.06},
          {"name":"four","number":8496319.48},
          {"name":"five","number":5083119.83},
          {"name":"six","number":27792991.11},
          {"name":"seven","number":4593866.36},
          {"name":"eight","number":10191579.24},
          {"name":"nine","number":9957540.49},
          {"name":"ten","number":10811025.62},
          {"name":"eleven","number":15137575.28},
          {"name":"twelve","number":29166966.97},
          {"name":"thirteen","number":9264091.40},
          {"name":"fourteen","number":10995898.53},
          {"name":"fifteen","number":8379569.33}
        ]
    }
  ]
}