目前我有以下树形布局:
!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}
]
}
]
}