在簡單的html頁面中自動調整d3js圖的大小

此問題根據給出的建議here發起。按照建議的修改來解決第一個節點的問題被切斷，代碼如下所示：在簡單的html頁面中自動調整d3js圖的大小

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Page</title> 
<meta charset="utf-8"> 
<style> 

.node circle { 
    fill: #999; 
} 

.node text { 
    font: 10px sans-serif; 
} 

.node--internal circle { 
    fill: #555; 
} 

.node--internal text { 
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; 
} 

.link { 
    fill: none; 
    stroke: #555; 
    stroke-opacity: 0.4; 
    stroke-width: 1.5px; 
} 

html, body { 
    height: 100%; 
} 

html { 
    display: table; 
    margin: auto; 
} 

body { 
    display: table-cell; 
    vertical-align: middle; 
} 

</style> 
</head> 
<body> 
<svg width="960" height="2000"></svg> 
<script src="d3.js"></script> 
<script> 

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"), 
    g = svg.append("g").attr("transform", "translate(60,0)"); 

var tree = d3.cluster() 
    .size([height, width - 160]); 

var stratify = d3.stratify() 
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); 

d3.csv("test.csv", function(error, data) { 
    if (error) throw error; 

    var root = stratify(data) 
     .sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); }); 

    tree(root); 

    var link = g.selectAll(".link") 
     .data(root.descendants().slice(1)) 
    .enter().append("path") 
     .attr("class", "link") 
     .attr("d", function(d) { 
     return "M" + d.y + "," + d.x 
      + "C" + (d.parent.y + 100) + "," + d.x 
      + " " + (d.parent.y + 100) + "," + d.parent.x 
      + " " + d.parent.y + "," + d.parent.x; 
     }); 

    var node = g.selectAll(".node") 
     .data(root.descendants()) 
    .enter().append("g") 
     .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) 
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) 

    node.append("circle") 
     .attr("r", 2.5); 

    node.append("text") 
     .attr("dy", 3) 
     .attr("x", function(d) { return d.children ? -8 : 8; }) 
     .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) 
     .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); }); 
}); 

</script> 
</body> 
</html>

現在，端節點被切斷，它看起來如下：

如何擴展它？對不起我對JavaScript的無知。

來源

2017-05-17 kingmakerking

可以調節樹的寬度來繪製成更小的空間：

所以這個代碼

var tree = d3.cluster() 
    .size([height, width - 160]);

使這樣的：

var tree = d3.cluster() 
    .size([height, width - 360]);//reducing the width of the tree by 200

這應該給予更多的空間用於標籤。

工作示例here

來源

2017-05-17 10:15:26 Cyril

在簡單的html頁面中自動調整d3js圖的大小

回答

相關問題