基於JSON的sankey.js中節點的着色

關於D3 Sankey（https://bost.ocks.org/mike/sankey/），我想了解如何使用JSON文件中的某個分類變量對節點進行着色。基於JSON的sankey.js中節點的着色

鏈接到JSON文件中的實際代碼中使用了： https://bost.ocks.org/mike/sankey/energy.json

我的問題因此是，如果我提供有關的「名稱」一類的一些信息：

{"name":"Solar PV", "category":"A"}, 
{"name":"Solar Thermal","category":"A"}, 
{"name":"Solar","category":"B"}, 
{"name":"Tidal","category":"C"}, 
{"name":"UK land based bioenergy","category":"A"}, 
{"name":"Wave","category":"A"}, 
{"name":"Wind","category":"B"}

那麼什麼應根據類別對源代碼進行更改以對節點着色。 P.S：不是D3/JS的專家，如果這個問題太天真，請原諒我有限的技能。

感謝

來源

2016-12-25 JALO - JusAnotherLivngOrganism

感謝編輯和您以前的評論赫拉爾多。我實際上是在使用JSON中的分類變量尋找着色節點（多個節點可能會獲得相同的顏色），因此與節點類別相對應的圖例會使得Sankey更具信息性。從您的評論獲取線索，我正在嘗試接近解決方案。謝謝 –

在鏈接的例子中，你會看到這個代碼塊：

node.append("rect") 
    .attr("height", function(d) { return d.dy; }) 
    .attr("width", sankey.nodeWidth()) 
    .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); }) 
    .style("stroke", function(d) { return d3.rgb(d.color).darker(2); }) 
    .append("title") 
    .text(function(d) { return d.name + "\n" + format(d.value); });

與更換.style("fill"行：

.style("fill", function(d) { return d.color = color(d.category); })

來源

2016-12-25 15:51:47 Mark

謝謝馬克......昨天也是這樣。 –

嗨，我很好奇，如果可以在同心圓中安排Sankey節點（因爲它固有地以層次排序格式組織節點）。 –

@NaSu，sankey插件內置的任何東西都不會爲你做。來自源代碼中的評論：'//節點被分配了傳入鄰居的最大寬度加上一個; //沒有傳入鏈接的節點被分配寬度爲零，而沒有傳出鏈接的節點被分配最大寬度。「也許你想要類似於[徑向樹]的東西（https://bl.ocks.org/mbostock/4063550）。 – Mark

在博斯托克的代碼，這是行顏色矩形：

.style("fill", function(d) { 
    return d.color = color(d.name.replace(/ .*/, "")); 
})

所以，只要更改到：

.style("fill", function(d) { 
    return d.color = color(d.category); 
})

來源

2016-12-25 15:53:17

謝謝Gerardo ...也是這樣做的 –

基於JSON的sankey.js中節點的着色

回答

相關問題