Javascript d3.js:无法读取属性'；呼叫'；未定义的
通过使用方法d3.json（）读取json对象，我创建了一个d3图。但它不会加载，这是因为浏览器控制台显示以下错误： 在本例中，我使用的是D3V3，根据我从web复制的一个示例 如果有人能解释一下为什么会发生这种错误，我将不胜感激 不用再多说了，我感激地说再见 下面我留下这个例子的完整代码Javascript d3.js:无法读取属性'；呼叫'；未定义的,javascript,d3.js,Javascript,D3.js,通过使用方法d3.json（）读取json对象，我创建了一个d3图。但它不会加载，这是因为浏览器控制台显示以下错误： 在本例中，我使用的是D3V3，根据我从web复制的一个示例 如果有人能解释一下为什么会发生这种错误，我将不胜感激 不用再多说了，我感激地说再见 下面我留下这个例子的完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <titl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-quadtree.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-force.v1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body style="background-color: rgb(233, 236, 239);">
<br><legend align="center">Convergencia de ODS con Plan Nacional de Desarrollo</legend><hr>
<div class="container">
<div class="jumbotron">
<script>
var w = 1200;
var h = 550;
var radius = Math.min(w, h);
var dataset = [
[ 600, 150]
];
var json = [
{
"pais": "Ecuador",
"pais_nid": 14,
"ods": "1. Fin a la pobreza",
"ods_nid": 35,
"ods_color_hex": "E5243B",
"objetivos_plan_ods": 5
},
{
"pais": "Ecuador",
"pais_nid": 14,
"ods": "2. Hambre cero",
"ods_nid": 36,
"ods_color_hex": "DDA63A",
"objetivos_plan_ods": 9
}
];
d3.json(json, function(data) {
var rScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.objetivos_plan_ods; })])
.range([2, 40]);
//Crear un elemento SVG
var svg = d3.select("div.jumbotron")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("viewBox", "" + -(w/2) + " " + -(h/2) + " " + w + " " + h + "");
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("r", 125)
.attr("stroke", "rgb(255, 255, 255)")
.attr("stroke-width", "8")
.attr("fill", "none");
svg.on("click", function() {
document.getElementById("msg").setAttribute("style", "display:none;");
document.getElementById("msg").innerHTML = '';
d3.event.stopPropagation();
});
var node = d3.select("svg")
.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("style", "cursor:pointer;")
.attr("r", function(d) { return rScale(d.objetivos_plan_ods);})
.attr("fill", function(d) {
return "rgba(" + Math.floor((Math.random() * 255) + 0) + "," + Math.floor((Math.random() * 255) + 0) + "," + Math.floor((Math.random() * 255) + 0) + ", 0.50)";
})
.attr("id", function(d) { return "circle-" + d.ods_nid; })
.on("click",function(d) {
document.getElementById("msg").removeAttribute("style");
document.getElementById("circle-" + d.ods_nid).setAttribute("stroke", "rgb(140, 233, 255)");
document.getElementById("circle-" + d.ods_nid).setAttribute("stroke-width", "6");
document.getElementById("msg").innerHTML = d.ods;
d3.event.stopPropagation();
})
.on("mouseout", function(d) {
document.getElementById("msg").setAttribute("style", "display:none;");
document.getElementById("circle-" + d.ods_nid).removeAttribute("stroke");
document.getElementById("circle-" + d.ods_nid).removeAttribute("stroke-width");
document.getElementById("msg").innerHTML = '';
d3.event.stopPropagation();
});
d3.forceSimulation(data)
.force("charge", d3.forceCollide().radius(function(d) { return rScale(d.objetivos_plan_ods); }))
.force("r", d3.forceRadial(function(d) { return 125; }))
.on("tick", ticked);
function ticked() {
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
var color = d3.scale.category20();
var pie = d3.layout.pie()
.value(function(d) { return 5; });
var arc = d3.svg.arc()
.innerRadius(radius - 508)
.outerRadius(radius - 480);
d3.select("svg")
.datum(data).selectAll("path")
.data(pie)
.enter()
.append("path")
.attr("stroke", "rgb(233, 236, 239)")
.attr("stroke-width", "3")
.attr("fill", function(d) { return "#" + d.ods_color_hex; })
.attr("d", arc);
})
</script>
<div class="row">
<div class="col-lg-12">
<div id="msg" style="display:none;" class="underline alert alert-warning" align="center"></div>
</div>
</div>
</div>
</div>
</body>
</html>
D3试验
德萨罗国家ODS控制计划融合
var w=1200；
var h=550；
变量半径=数学最小值（w，h）；
变量数据集=[
[ 600, 150]
];
var json=[
{
“pais”：“厄瓜多尔”，
“pais_nid”：14，
“ods”：“1.Fina la pobreza”，
“ods_nid”：35，
“ods颜色十六进制”：“E5243B”，
“目标计划”：5
},
{
“pais”：“厄瓜多尔”，
“pais_nid”：14，
“ods”：“2.Hambre cero”，
“ods_nid”：36，
“ods颜色十六进制”：“DDA63A”，
“目标计划”：9
}
];
d3.json（json，函数（数据）{
var rScale=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d）{return d.objetivos_plan_ods；}）]）
.范围（[2,40]）；
//Crear un elemento SVG
var svg=d3.select（“div.jumbotron”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.attr（“视图框”、“视图框”（w/2）++-（h/2）+++w+++h+）；
svg.selectAll（“圆圈”）
.数据（数据集）
.输入（）
.附加（“圆圈”）
.attr（“r”，125）
.attr（“笔划”、“rgb（255、255、255）”）
.attr（“笔划宽度”、“8”）
.attr（“填充”、“无”）；
打开（“单击”，函数（）{
document.getElementById（“msg”）.setAttribute（“样式”，“显示：无；”）；
document.getElementById（“msg”）.innerHTML=''；
d3.event.stopPropagation（）；
});
var node=d3.选择（“svg”）
.附加（“g”）
.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“样式”、“光标：指针；”）
.attr（“r”，函数（d）{返回rScale（d.objetivos_plan_ods）；}）
.attr（“填充”，功能（d）{
返回“rgba（“+Math.floor（（Math.random（）*255）+0）+”，“+Math.floor（（Math.random（）*255）+0）+”，“+Math.floor（（Math.random（）*255）+0）+”，“0.50”）；
})
.attr（“id”，函数（d）{return“circle-”+d.ods_nid；}）
.打开（“单击”，功能（d）{
document.getElementById（“msg”）.removeAttribute（“style”）；
document.getElementById（“圆圈-”+d.ods_-nid）.setAttribute（“笔划”，“rgb（140233255）”）；
document.getElementById（“圆圈-”+d.ods_-nid）.setAttribute（“笔划宽度”，“6”）；
document.getElementById（“msg”）.innerHTML=d.ods；
d3.event.stopPropagation（）；
})
.开启（“鼠标出”，功能（d）{
document.getElementById（“msg”）.setAttribute（“样式”，“显示：无；”）；
document.getElementById（“圆圈-”+d.ods_-nid）.removeAttribute（“笔划”）；
document.getElementById（“圆-”+d.ods_-nid）.removeAttribute（“笔划宽度”）；
document.getElementById（“msg”）.innerHTML=''；
d3.event.stopPropagation（）；
});
d3.力模拟（数据）
.force（“电荷”，d3.forceCollide（）.radius（函数（d）{return rScale（d.objetivos_plan_ods）；}））
.force（“r”，d3.forceRadial（函数（d）{return 125；}））
。在（勾选）上；
函数勾选（）{
节点
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）
.value（函数（d）{return 5；}）；
var arc=d3.svg.arc（）
.内半径（半径-508）
.外层（半径-480）；
d3.选择（“svg”）
.基准（数据）。选择全部（“路径”）
.数据（pie）
.输入（）
.append（“路径”）
.attr（“笔划”、“rgb（233236239）”）
.attr（“笔划宽度”、“3”）
.attr（“fill”，函数（d）{return“#”+d.ods_color_hex；}）
.attr（“d”，弧）；
})
d3.jsonjsondata