Question

目前我有以下树形布局：

！http://i.imgur.com/b6YyiYh.png

我希望它们能够堆叠在一起，而不是让我的所有链接都击中右侧的圆圈，这样每条线都可以找到它自己的圆圈。见图：

！http://i.imgur.com/f4ZF0Wb.png

我开始修改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>

-------- 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}
        ]
    }
  ]
}

D3树源y堆叠位置，不会导致一个点

0 个答案: