Javascript d3 sankey图中的节点排序
我正试着在D3 sankey中排序节点。我希望具有较大值的节点向上绘制 这是相关的代码()片段,我试图通过使用D3的内置排序函数实现我想要的。结果不是我所期望的 在检查sankey.js时,我并不完全清楚插件如何对节点进行排序。如能就此问题提供任何建议,将不胜感激Javascript d3 sankey图中的节点排序,javascript,d3.js,Javascript,D3.js,我正试着在D3 sankey中排序节点。我希望具有较大值的节点向上绘制 这是相关的代码()片段,我试图通过使用D3的内置排序函数实现我想要的。结果不是我所期望的 在检查sankey.js时,我并不完全清楚插件如何对节点进行排序。如能就此问题提供任何建议,将不胜感激 //set up graph in same style as original example but empty graph = {"nodes" : [], "links" : []}; data.forEac
//set up graph in same style as original example but empty
graph = {"nodes" : [], "links" : []};
data.forEach(function (d) {
graph.nodes.push({ "name": d.source });
graph.nodes.push({ "name": d.target });
graph.links.push({ "source": d.source,
"target": d.target,
"value": +d.value });
});
//try to sort the nodes and links before indexing them (not working)
graph.nodes.sort(function (a,b) {return d3.descending(a.value, b.value); });
graph.links.sort(function (a,b) {return d3.descending(a.value, b.value); });
// return only the distinct / unique nodes
graph.nodes = d3.keys(d3.nest()
.key(function (d) { return d.name; })
.map(graph.nodes));
// loop through each link replacing the text with its index from node
graph.links.forEach(function (d, i) {
graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
});
//now loop through each nodes to make nodes an array of objects
// rather than an array of strings
graph.nodes.forEach(function (d, i) {
graph.nodes[i] = { "name": d };
});
从sankey.js文件中的resolveCollisions()函数中删除以下行将阻止节点顺序的更改:
function resolveCollisions() {
...
// nodes.sort(ascendingDepth); // commented this out to prevent node reordering
...
}
然后,节点将按其最初填充的方式进行垂直排序。因此,如果在推送数据之前先对节点进行排序,它们将按排序顺序显示。如果将布局
迭代次数
值设置为零,您将按字母顺序(按名称)获得节点:这对我来说已经足够好了
var sankey = d3.sankey()
.nodeWidth(36)
.nodePadding(40)
.size([width, height])
.layout(0); /* <<<<<<< setting the iterations to zero */
var sankey=d3.sankey()
.诺德维特(36)
.nodePadding(40)
.尺寸([宽度、高度])
.布局(0);/* 刚刚遇到这个问题,它特别重要,(不幸的是,它没有出现),允许您设置任意顺序(以及执行许多其他非标准的操作,如组和周期):
根据:
如果指定了排序,则将节点排序设置为指定值并返回此布局。如果未指定排序,则返回当前值,默认为null
当排序为空时,将自动计算节点排序
如果指定了排序,则直接使用它,并且不会发生秩分配或排序算法。排序结构有三个嵌套列表:排序是一个层列表,每个层列表是一个条带列表,每个条带列表是一个节点ID列表
在AICT中,示例中的插入符号(^
)表示组名^nodeName
如果您已经深入到一个项目中,这可能不会特别有用,但如果从头开始,这可能是我的第一个调用端口。以下步骤可用于创建具有自定义节点顺序的sankey
let data = {nodes:[],links:[]}
函数对所有节点进行排序/排序
如果我正确阅读了您的代码--graph.nodes.sort(函数(a,b){返回d3.descending(a.value,b.value);})代码>节点没有要排序的值属性…True。我可能需要对sankey.js中的值进行排序,然后计算它。将尝试在此处发布结果。@seb您找到解决方案了吗?如果是,你能发邮件吗?
let data = {nodes:[],links:[]}
const sankey = d3.sankey()
.size(graphSize)
.nodeId(d => d.id)
.nodeWidth(nodeWidth)
.nodePadding(0.5)
.nodeAlign(nodeAlignment)
.nodeSort(null) //creates sankey nodes as ordered in the data
let graph = sankey(data)