d3.js鏈接不渲染爲

我使用的是修改後的氣球圖形和具有越來越呈現節點之間的聯繫問題行。我正在使用JustinVDM的自定義氣球圖（https://gist.github.com/justinvdm/3676778）d3.js鏈接不渲染爲

正在使用的數據是股票Bostock flare.json數據：http://bl.ocks.org/mbostock/4063530。

如果我包括d3.json("flare.json", function(error, root) {...的「錯誤」選項，就會報錯。沒有它，至少會出現節點。源和目標的數據是否被識別？

如果是，下面的嘗試是試圖調用父源的座標和兒童爲目標，並在二者之間畫一條線，但我不知道這種做法是正確的。我應該改用d3.svg.diagonal嗎？

這是曲線圖顯示爲它： No edges

var margin = {top: 20, right: 20, bottom: 20, left: 20}, 
    width =1500, 
    height = 1500, 
    diameter = Math.min(width, height), 
    radius = diameter/2; 


var balloon = d3.layout.balloon() 
    .size([width, height]) 
    .gap(50)          

var line = d3.svg.line() 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")") 

    root = "flare.json"; 
    root.y0 = height/2; 
    root.x0 = width/2; 

d3.json("flare.json", function(root) { 
    var nodes = balloon.nodes(root), 
     links = balloon.links(nodes); 

    var link = svg.selectAll(".link") 
     .data(links) 
    .enter().append("path") 
     .attr("class", "link") 
     .attr("d", line) 
     .attr("fill", "black"); 

    var node = svg.selectAll("g.node") 
    .data(nodes) 
    .enter() 
    .append("g") 
    .attr("class", "node"); 

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 

    node.append("text") 
     .attr("dx", function(d) { return d.x }) 
     .attr("dy", function(d) { return d.y }) 
     .attr("font-size", "5px") 
     .attr("fill", "white") 
     .style("text-anchor", function(d) { return d.children ? "middle" : "middle"; }) 
     .text(function(d) { return d.name; }) 
});

UPDATE：我從API參考下面的代碼添加大約「hierarchy.links」：

var link= svg.selectAll("path") 
    .data(links) 
.enter() 
    .append("path") 
    .attr("d", d3.svg.diagonal());

的resulta有點奇怪，但如果我用d3.svg.line()代替d3.svg.diagonal()，則代碼會中斷。

enter image description here

怎樣才使邊緣的線條和不帶？

來源

2013-04-14 Jakub Svec

flare.json是什麼樣子？ – victorsc

這是因爲您在JSON文件中沒有任何鏈接。不確定雖然 – victorsc

Json與以下鏈接中的相同： –

您可以通過設置填充爲無，用筆畫來定義顏色使邊緣線。就像這樣：

var link = svg.selectAll(".link") 
    .data(links) 
.enter().append("path") 
    .attr("class", "link") 
    .attr("d", line) 
    .attr("fill", "none") 
    .attr("stroke", "black");

來源

2013-05-24 16:32:21 mes5k

有此佈局節點之間沒有聯繫。目標是將樹表示爲具有嵌套節點的圖。

但是，如果你真的想只通過其顏色或厚度添加鏈接，即使他們添加信息，那麼你可以隨時通過給每個圓圈不同id畫圓之間的線，然後繪製source和之間的界線target將您從數據中圈出來。

來源

2013-04-16 05:31:18

d3.js鏈接不渲染爲

回答

相關問題