我使用
d3 sankey实现的问题是,没有办法指定节点在x轴上的位置.我一直在通过源代码,并没有真正的“干净”的方式来以合理的比例来指定x值(即图1-5是5个节点宽).我正在创造一些可以像课程计划者一样使用教育的东西,所以x值将与学期相符.假设我有一门课程,直到我大二学年才能上课,这将是一个三分之一(1/2是新生,3/4大二等).问题是,如果事先没有连接到这个课程,它总是在x的1,所以我想把它推到正确的两个空格.
我注意到,实际的sankey图表中的x值并不能反映出它的多少个节点,所以这很难做到.
我也碰到了this question,我意识到,默认情况下,图表不会让我放置一个节点.我没有任何问题调整sankey.js的例子来完成这个,但是我现在坚持要怎么做.
解决方法
这个有可能.看这个
JSFiddle.
可以修改sankey.js中的computeNodeBreadths函数,以查找已分配给节点(node.xPos)的显式x位置：
function computeNodeBreadths() {
var remainingNodes = nodes,nextNodes,x = 0;
while (remainingNodes.length) {
nextNodes = [];
remainingNodes.forEach(function(node) {
if (node.xPos)
node.x = node.xPos;
else
node.x = x;
node.dx = nodeWidth;
node.sourceLinks.forEach(function(link) {
nextNodes.push(link.target);
});
});
remainingNodes = nextNodes;
++x;
}
//
moveSinksRight(x);
scaleNodeBreadths((width - nodeWidth) / (x - 1));
}
那么你需要做的就是在所需的节点上指定xPos.在上面的例子中,我已经在node2上设置了xPos = 1.请参阅JSFiddle示例中的getData()
... },{
"node": 2,"name": "node2","xPos": 1
},{ ...
