我目前正在尝试使用D3.js创建一个简单的Sankey图。我已经完成了大部分工作,但是设置高度和y轴被证明是一个挑战。具体来说,返回的错误如下:
我尝试遵循以下示例(有效):http://bost.ocks.org/mike/sankey/
我的示例在这里:http://zenbot.ca/elections.html
请注意,下面的文本(“Brockville”,“Central Toronto”等)仅是一项测试,可确保我正确连接到JSON文件,因此您可以忽略它。页面顶部的Blob看起来应该像Sankey图,但目前没有。
我的JSON样本(可以在http://zenbot.ca/js/electionJSON.json处获得)的形成方式似乎与Bostock先生的示例(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行的功能会使一个节点出现,但其余节点仍然是一团糟。
所以...这似乎取决于节点的高度和位置。它看起来很像Bostock的示例,但显然不是。有任何想法吗?
使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
作为值。但是sankey希望该值称为value
:
function value (link) {
return link.value;
}
这将始终在您的数据集中返回
undefined
。似乎sankey在多个地方都做了这个假设,因此我最终使用sed将“金额”一词替换为“值”。这似乎可以解决问题。