我通过使用方法d3.json()读取json对象来创建d3图。但它没有加载,这是因为浏览器控制台显示以下错误:
对于这种情况,我使用的是d3 v3,根据我从网上复制的一个例子。
如果有人能解释我为什么会出现这种错误,我将非常感激。
不用多说,我感激地说再见。
下面我留下这个例子的完整代码。
<!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>
答案 0 :(得分:1)
d3.json是一个通过调用外部json文件获取数据的函数。 d3.json函数试图调用外部json文件,它期望第一个参数中的文件路径。您在第一个参数中传递了一个json数据,但它对此函数无效。这就是错误发生的原因。
在您的情况下,您不需要致电d3.json。您可以删除d3.json
此功能并将json
变量重命名为data
,然后它就能正常运行。
如果你有任何json文件而不是数据,那么你可以使用该函数,你需要在这个函数的第一个参数中传递文件路径。
请查看以下代码段。
var w = 1200;
var h = 550;
var radius = Math.min(w, h);
var dataset = [
[ 600, 150]
];
var data = [
{
"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);
//})
&#13;
<!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">
<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>
&#13;