異なる高さクラスタ系統樹iはd3.js について質問があり

をd3.jsに私が実行されている。この基本的な例があります：私のjavascriptのコードはここにある異なる高さクラスタ系統樹iはd3.js について質問があり

{ 
    "name": "root", 
    "children": [ 
    { 
    "name": "parent A", 
    "children": [ 
     {"name": "child A1"}, 
     {"name": "child A2"}, 
     {"name": "child A3"} 
    ] 
    },{ 
    "name": "parent B", 
    "children": [ 
     {"name": "child B1"}, 
     {"name": "child B2"} 
    ] 
    } 
    ] 
}

：http://i.imgur.com/DxPHuAC.png と基本的なJSON形式を：

<!doctype html></html> 
<meta charset="utf-8" /> 
<style> 
.node circle {  
    fill: #fff;  
    stroke: steelblue;  
    stroke-width: 1.5px; 
} 
.node {  
    font: 20px sans-serif; 
} 
.link {  
    fill: none;  
    stroke: #ccc;  
    stroke-width: 1.5px; 
} 
</style> 
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
<script type="text/javascript"> 
var width = 600; 
var height = 500; 
var cluster = d3.layout.cluster()  
    .size([height, width-200]); 
var diagonal = d3.svg.diagonal()  
    .projection (function(d) { return [d.y, d.x];}); 
var svg = d3.select("body").append("svg")  
    .attr("width",width)  
    .attr("height",height)  
    .append("g")  
    .attr("transform","translate(100,0)"); 
d3.json("dendrogram03.json", function(error, root){  
    var nodes = cluster.nodes(root);  
    var links = cluster.links(nodes);  
    var link = svg.selectAll(".link")  
     .data(links)  
     .enter().append("path")  
     .attr("class","link")  
     .attr("d", diagonal);  
    var node = svg.selectAll(".node")  
     .data(nodes)  
     .enter().append("g")  
     .attr("class","node")  
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });  
    node.append("circle")  
     .attr("r", 4.5);  
    node.append("text")  
     .attr("dx", function(d) { return d.children ? -8 : 8; })  
     .attr("dy", 3)  
     .style("text-anchor", function(d) { return d.children ? "end" : "start"; })  
     .text(function(d){ return d.name;}); 
}); 
</script>

しかし、問題は、私はD3のドキュメントを探したということですが、あまり良くないので、私はこの方法のように、ツリーの異なる高さにすべてのノードを配置する：http://i.imgur.com/VoaCqpX.png

出典

2016-07-01 Thenotic2

これを達成するには、再帰関数を使用してツリーを下降させ、各子ノードのループを繰り返すたびに変更量を考慮して、各子ノードのy属性を変更します。あなたは、ノードの作成後にはなく、リンクを作成する前にいくつかの修飾機能が必要になります

：

function create_offset(node){ 
    if(node.children){ 
     //modify the y values of each child. increasing the offset each time 
     var offset = 0; 
     for(var i = 0; i<node.children.length;i++){ 
     node.children[i].y = node.children[i].depth * 100 + offset; 
     offset += 20; //change this to change the degree of offset 
     } 

     //check each child to see if it has it's own children. If so, decend the tree recursively 
     for(var i = 0; i<node.children.length;i++){ 
     if(node.children[i].children){ 
      create_offset(node.children[i]); 
     } 
     }  
    } 
    }

：

var nodes = cluster.nodes(root).reverse(); 
    create_offset(nodes[0]); 
    var links = cluster.links(nodes);

機能オフセットを作成するためには、このような何かを見ることができます注：create_offset(nodes[0]);のnodes[0]がルートノードであることを確認してください。私はかなり確信していますが、あなたは二重チェックする必要があります

出典

2016-07-25 19:40:06

メッセージは正しくありませんでしたので削除します。問題は、この再帰関数が同じ値を与え、いくつかのノードが同じ高さにあることです。それは逆の形式では動作しません – Thenotic2

解決策は、関数のオフセットvarを入れて、逆（）を使用しないでください、答えは良いです。ありがとう – Thenotic2

異なる高さクラスタ系統樹iはd3.js について質問があり

答えて

関連する問題