[英]How to add a second value to the links of a Sankey diagram in d3.jS :
[英]Parsing and invalid value for D3.js sankey
我目前正在嘗試使用D3.js創建一個簡單的Sankey圖。 我已經完成了大部分工作,但設置高度和y軸證明是一個挑戰。 具體來說,返回的錯誤如下:
錯誤:解析問題d =“M15,NaNC479,NaN 479,NaN 943,NaN”錯誤:屬性高度的值無效=“NaN”
我試圖效仿這個例子(有效): http : //bost.ocks.org/mike/sankey/我的例子在這里: http : //zenbot.ca/elections.html
注意,下面的文本(“Brockville”,“Central Toronto”等)只是一個測試,以確保我正確連接到JSON文件,所以你可以忽略它。 頁面頂部的blob應該看起來像Sankey圖,但它目前沒有。
我的JSON樣本(可在http://zenbot.ca/js/electionJSON.json上找到 )似乎與博斯托克先生的例子( http://bost.ocks.org/mike/)相同。 sankey / energy.json )並且如下:
{
"nodes": [
{"name": "Brockville"},
{"name": "Central Toronto"},
...
],
"links": [
{"source": 0, "type": "Individual", "target": 26, "amount": 500},
{"source": 5, "type": "Individual", "target": 16, "amount": 200},
...
]
}
我自己試圖糾正這個問題的原因是我已經使用了“d.dy”值(嘗試用“d.amount”替換它)。 硬編碼為“100”而不是大約79行的功能使得一個節點出現,但其余的仍然是糾結的混亂。
所以...它似乎取決於節點的高度和位置。 它看起來很像博斯托克的例子,但顯然不是。 有任何想法嗎?
使sankey工作的代碼如下:
d3.json("js/electionJSON.json", function(election) {
sankey
.nodes(election.nodes)
.links(election.links)
.layout(32);
var link = svg.append("g").selectAll(".link")
.data(election.links)
.enter().append("path")
.attr("class", "link")
.attr("d", path)
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy - a.dy; });
link.append("title")
.text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.amount); });
var node = svg.append("g").selectAll(".node")
.data(election.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", function() { this.parentNode.appendChild(this); })
.on("drag", dragmove));
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.amount); });
node.append("text")
.attr("x", -6)
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
function dragmove(d) {
d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
sankey.relayout();
link.attr("d", path);
}
});
你可以為這一個踢自己,但是對我來說玩sankey實現是很好玩的。 你現在最大的問題是electionJSON.json
中的數據使用amount
作為值。 然而,桑基希望這個價值被稱為value
:
function value (link) {
return link.value;
}
這將始終在數據集中返回undefined
。 似乎sankey在多個地方做出了這個假設,所以我最終使用sed將“amount”替換為“value”。 這似乎成功了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.