Javascript 在D3插件sankey.js和html代码之间定义源代码
我正在尝试创建一个Sankey图,虽然我现在可以加载我的源代码,但我在Sankey.js和我的html代码之间遇到了一个小问题 当我运行HTML代码时,会收到如下错误消息: 未捕获的TypeError:无法调用未定义的方法“push” 这是错误链接指向的地方:Javascript 在D3插件sankey.js和html代码之间定义源代码,javascript,jquery,csv,d3.js,sankey-diagram,Javascript,Jquery,Csv,D3.js,Sankey Diagram,我正在尝试创建一个Sankey图,虽然我现在可以加载我的源代码,但我在Sankey.js和我的html代码之间遇到了一个小问题 当我运行HTML代码时,会收到如下错误消息: 未捕获的TypeError:无法调用未定义的方法“push” 这是错误链接指向的地方: // Populate the sourceLinks and targetLinks for each node. // Also, if the source and target are not objects, assume t
// Populate the sourceLinks and targetLinks for each node.
// Also, if the source and target are not objects, assume they are indices.
function computeNodeLinks() {
nodes.forEach(function(node) {
node.sourceLinks = [];
node.targetLinks = [];
});
links.forEach(function(link) {
var source = link.source,
target = link.target;
if (typeof source === "name") source = link.source = nodes[link.source];
if (typeof target === "name") target = link.target = nodes[link.target];
source.sourceLinks.push(link);
target.targetLinks.push(link);
});
}
这是HTML代码中的输入。我的数据来自csv文件
//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
});
});
我的问题是:sankey.js是否依赖于我的数据来自json文件的假设?。如果是,我如何调整它,使其与csv文件兼容?数据保存为以下列出的csv文件:
source,target,value
Barry,Elvis,2
Frodo,Elvis,2
Frodo,Sarah,2
Barry,Alice,2
Elvis,Sarah,2
Elvis,Alice,2
Sarah,Alice,4
您需要使用节点中的对象或链接的.source和.target中节点的索引。看起来您正在为此使用CSV中的字符串,这将以您观察到的方式中断 若要修复,请保留对正在创建的对象的引用,并在链接中使用这些对象:
data.forEach(function (d) {
var source = { "name": d.source },
target = { "name": d.target };
graph.nodes.push(source);
graph.nodes.push(target);
graph.links.push({ "source": source,
"target": target,
"value": +d.value });
});
杰出的这很有效。愚蠢的问题:我会以同样的方式定义值,并将其包含在sankey.js脚本中吗?还是需要有不同的定义?我不确定我是否理解你的问题。值是什么?值定义为每个节点的大小,下面是如何在初始sankey.js脚本中创建它://通过对相关链接求和计算每个节点的值大小。函数ComputeNodeDevalues{nodes.forEachfunctionnode{node.value=Math.max d3.sumnode.sourceLinks,value,d3.sumnode.targetLinks,value虽然html脚本中有值,但它一直告诉我它没有定义。我知道value是一个不同的实体,因为它不是一个变量,但我该如何定义它呢?看起来它假设每个链接都有一个.value att属性,因此您必须在那里指定。因此它应该与您正在生成的数据结构一起工作。