Javascript Error undefined不是对象(计算';source.sourceLinks.push';)D3.JS
在使我的Sankey图表正常工作之后,我想更改JSON输入文件中的一些内容, 我又添加了两个值,以便在通过节点时显示它们,但我遇到了一个问题,导致我出现在这里。 因此,在添加这两个值之后,我的图表将无法再次工作,首先添加这两个值后,它的输出在标题中出现了相同的错误这是这两个值的代码Javascript Error undefined不是对象(计算';source.sourceLinks.push';)D3.JS,javascript,d3.js,Javascript,D3.js,在使我的Sankey图表正常工作之后,我想更改JSON输入文件中的一些内容, 我又添加了两个值,以便在通过节点时显示它们,但我遇到了一个问题,导致我出现在这里。 因此,在添加这两个值之后,我的图表将无法再次工作,首先添加这两个值后,它的输出在标题中出现了相同的错误这是这两个值的代码 { "nodes": [ { "node": 0, "name": "Success" },
{
"nodes": [
{
"node": 0,
"name": "Success"
},
{
"node": 1,
"name": "Failed"
},
{
"node": 2,
"name": "Cantwell"
},
{
"node": 3,
"name": "Denmark"
},
{
"node": 4,
"name": "Eastville"
},
{
"node": 5,
"name": "Edgemere"
},
{
"node": 6,
"name": "Elmira"
},
{
"node": 7,
"name": "Eudora"
},
{
"node": 8,
"name": "Greigsville"
},
{
"node": 9,
"name": "Mosquito"
},
{
"node": 10,
"name": "Pablo"
},
{
"node": 11,
"name": "Ribera"
},
{
"node": 12,
"name": "Sands"
},
{
"node": 13,
"name": "Scioto"
},
{
"node": 14,
"name": "Sisters"
},
{
"node": 15,
"name": "Swormville"
}
],
"links": [
{
"source": 0,
"target": 2,
"value": 47,
"SPL": 0.6619718309859155,
"Success_Rate": 0.6619718309859155
},
{
"source": 1,
"target": 2,
"value": 24,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 3,
"value": 60,
"SPL": 0.4225352112676056,
"Success_Rate": 0.4225352112676056
},
{
"source": 1,
"target": 3,
"value": 11,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 4,
"value": 56,
"SPL": 0.2622788010111954,
"Success_Rate": 0.26291079812206575
},
{
"source": 1,
"target": 4,
"value": 15,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 5,
"value": 65,
"SPL": 0.22839118041582832,
"Success_Rate": 0.22887323943661972
},
{
"source": 1,
"target": 5,
"value": 6,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 6,
"value": 62,
"SPL": 0.17405036278275715,
"Success_Rate": 0.17464788732394365
},
{
"source": 1,
"target": 6,
"value": 9,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 7,
"value": 64,
"SPL": 0.14989297213677982,
"Success_Rate": 0.15023474178403756
},
{
"source": 1,
"target": 7,
"value": 7,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 8,
"value": 53,
"SPL": 0.10663983903420524,
"Success_Rate": 0.10663983903420524
},
{
"source": 1,
"target": 8,
"value": 18,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 9,
"value": 45,
"SPL": 0.07922535211267606,
"Success_Rate": 0.07922535211267606
},
{
"source": 1,
"target": 9,
"value": 26,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 10,
"value": 38,
"SPL": 0.0594679186228482,
"Success_Rate": 0.0594679186228482
},
{
"source": 1,
"target": 10,
"value": 33,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 11,
"value": 60,
"SPL": 0.08438456827924068,
"Success_Rate": 0.08450704225352113
},
{
"source": 1,
"target": 11,
"value": 11,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 12,
"value": 56,
"SPL": 0.07170294494238155,
"Success_Rate": 0.07170294494238157
},
{
"source": 1,
"target": 12,
"value": 15,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 13,
"value": 35,
"SPL": 0.04107981220657277,
"Success_Rate": 0.04107981220657277
},
{
"source": 1,
"target": 13,
"value": 0,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 14,
"value": 64,
"SPL": 63.89878163333731,
"Success_Rate": 0.06933911159263272
},
{
"source": 1,
"target": 14,
"value": 43,
"SPL": 0,
"Success_Rate": 0
},
{
"source": 0,
"target": 15,
"value": 62,
"SPL": 0.061367069486404836,
"Success_Rate": 0.06143001007049345
},
{
"source": 1,
"target": 15,
"value": 9,
"SPL": 0,
"Success_Rate": 0
}
]
}
以及运行图形的代码
// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg1 = d3.select("#sceneLevel")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
// Color scale used
var color = d3.scaleOrdinal(d3.schemeCategory20);
// Set the sankey diagram properties
var sankey = d3.sankey()
.nodeWidth(36)
.nodePadding(5)
.size([width, height]);
// load the data
d3.json("https://raw.githubusercontent.com/augustin-laurent/Visualization_Tool/master/data.json", function(error, graph) {
// Constructs a new Sankey generator with the default settings.
sankey
.nodes(graph.nodes)
.links(graph.links)
.layout(1);
// add in the links
var link = svg1.append("g")
.selectAll(".link")
.data(graph.links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", sankey.link() )
.style("stroke-width", function(d) { return Math.max(1, d.dy); })
.sort(function(a, b) { return b.dy - a.dy; })
// add in the nodes
var node = svg1.append("g")
.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.drag()
.subject(function(d) { return d; })
.on("start", function() { this.parentNode.appendChild(this); })
.on("drag", dragmove));
// add the rectangles for the nodes
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); })
// Add hover text
.append("title")
.text(function(d) { return d.name + "\n" + "SPL is " + d.SPL + "And Success_rate is" + d.Success_rate; });
// add in the title for the nodes
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");
// the function for moving the nodes
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", sankey.link() );
}
});
//设置图形的尺寸和边距
var margin={顶部:10,右侧:10,底部:10,左侧:10},
宽度=500-边距。左侧-边距。右侧,
高度=500-margin.top-margin.bottom;
//将svg对象附加到页面主体
变量svg1=d3。选择(“场景级别”)
.append(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.附加(“g”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
//使用的色标
var color=d3.scaleOrdinal(d3.schemeCategory 20);
//设置sankey图表属性
var sankey=d3.sankey()
.诺德维特(36)
.节点添加(5)
.尺寸([宽度、高度]);
//加载数据
d3.json(“https://raw.githubusercontent.com/augustin-laurent/Visualization_Tool/master/data.json,函数(错误,图形){
//使用默认设置构造新的Sankey生成器。
桑基
.nodes(图.nodes)
.links(graph.links)
.布局(1);
//添加链接
var link=svg1.append(“g”)
.selectAll(“.link”)
.数据(图表.链接)
.输入()
.append(“路径”)
.attr(“类”、“链接”)
.attr(“d”,sankey.link())
.style(“笔划宽度”,函数(d){return Math.max(1,d.dy);})
.sort(函数(a,b){返回b.dy-a.dy;})
//添加节点
var node=svg1.append(“g”)
.selectAll(“.node”)
.数据(图.节点)
.enter().append(“g”)
.attr(“类”、“节点”)
.attr(“transform”,函数(d){return“translate”(“+d.x+”,“+d.y+”)”);})
.call(d3.drag()
.subject(函数(d){return d;})
.on(“开始”,函数(){this.parentNode.appendChild(this);})
.在(“拖动”,拖动)上);
//为节点添加矩形
节点
.append(“rect”)
.attr(“高度”,函数(d){返回d.dy;})
.attr(“宽度”,sankey.nodeWidth())
.style(“fill”,函数(d){return d.color=color(d.name.replace(/.*/,“”));}
.style(“stroke”,函数(d){返回d3.rgb(d.color).dark(2);})
//添加悬停文本
.附加(“标题”)
.text(函数(d){返回d.name+“\n”+“SPL为”+d.SPL+”,成功率为“+d.Success\u rate;});
//添加节点的标题
节点
.append(“文本”)
.attr(“x”,-6)
.attr(“y”,函数(d){返回d.dy/2;})
.attr(“dy”,“.35em”)
.attr(“文本锚定”、“结束”)
.attr(“转换”,null)
.text(函数(d){返回d.name;})
.filter(函数(d){返回d.x
这是HTML文件
.集装箱{
显示器:flex;
弯曲方向:行;
}
.链接{
填充:无;
行程:#000;
笔画不透明度:.2;
}
.link:悬停{
笔画不透明度:.5;
}
.背景路径{
填充:无;
行程:#ddd;
形状渲染:边缘清晰;
}
.前景路径{
填充:无;
笔画:钢蓝;
}
.刷{
填充不透明度:.3;
冲程:#fff;
形状渲染:边缘清晰;
}
.轴线,
.轴路径{
填充:无;
行程:#000;
形状渲染:边缘清晰;
}
.轴文本{
文本阴影:01px0#fff,1px0#fff,0-1px0#fff,-1px0#fff;
光标:移动;
}
因此,我尝试将其恢复到以前的状态,并且错误更改为未定义不是对象(评估“graph.links”),因此,错误来自我的JS文件。
SoI尝试了两天的调整,仍然没有找出我的代码有什么问题
我将感谢您的帮助,我也将在这里。我希望在单击节点之间的链接时进行交互。如果您有任何提示,我将非常感谢您的帮助。这个问题只是一个简单的问题;此处缺少
.sort(函数(a,b){return b.dy-a.dy;})
但该值仍然未定义,因为它没有从JSON文件中读取它您的JSON样本是更改之前还是之后的样本?不,它是新样本之前使用的样本除了此处没有的字段SPL和成功率外,其他都是相同的,这就是为什么我试图还原它,因为我认为它仅限于一个值我看不到这些属性在代码中以某种方式使用。。。你确定从数据中删除它们会有效吗?是的,当我不尝试调整原始代码时,我忘记将第65行改回原来的代码:。text(函数(d){return d.name+“\n”+“SPL”是“+d.SPL+”,Success_rate是“+d.Success_rate;});但是这不会改变任何事情,即使我删除了它,我在它工作2天前也会出错。您是否尝试使用try/catch
封装代码的一部分以查找产生错误的行?