我正在尝试使用 d3.js + dc.js + crossfilter 可视化一些数据。 我正在使用存储数据的 JSON 文件。 但看起来 d3 没有读取数据。
我做错了什么？
这是错误:d3.js:8756 Error: attribute d: Expected number, "Mundefined,6V0Hun ...".
这里是代码:
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="frameworks/dc.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/
crossfilter.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"
charset="utf-8"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.js"></script>
<script type="text/javascript"
src="https://rawgit.com/crossfilter/reductio/master/reductio.js">
</script>
<script type="text/javascript"
src="https://npmcdn.com/universe@0.8.1/universe.js"></script>
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script type="text/javascript" src="index_json.js"></script>
</body>
<footer>
</footer>
</html>
JS
window.onload=function(){
var colorScale =
d3.scale.ordinal().domain(["name","total","category"])
.range(["#006699","#33F5B7", "#6CD4FF", "4DE6D8" ]);
var data;
d3.json("./pata.json", function(data) {
console.log(data[1]);
var ndx = crossfilter(data);
var nameDim = ndx.dimension(function (d) {
return d.nome;
});
var croccDim = ndx.dimension(function (d) {
return d.croccantezza;
});
var gustoDim = ndx.dimension(function (d) {
return d.gusto;
});
var chimDim = ndx.dimension(function (d) {
return d.chimichevolezza;
});
var dipDim = ndx.dimension(function (d) {
return d.rischio_dipendenza;
});
var nameSumGroup = nameDim.group().reduceSum(function(data){ return
d.total; });
var croccGroup = croccDim.group();
var gustoGroup = gustoDim.group();
var chimGroup = chimDim.group();
var dipGroup = dipDim.group();var chart1 = dc.barChart("#chart1");
chart1
.width(400).height(200)
.dimension(croccDim)
.group(croccGroup)
.brushOn(true)
.yAxisLabel("Quantity of Records")
.margins({top: 10, right: 50, bottom: 30, left: 60})
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.colors(colorScale);
var chart2 = dc.barChart("#chart2");
chart2
.width(400).height(200)
.dimension(gustoDim)
.group(gustoGroup)
.brushOn(true)
.yAxisLabel("Sum of Totals")
.margins({top: 10, right: 50, bottom: 30, left: 60})
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.colors(colorScale);
var catChart = dc.pieChart("#chart3");
catChart
.width(200).height(200)
.radius(80)
.innerRadius(20)
.dimension(dipDim)
.group(dipGroup)
.colors(colorScale);
dc.renderAll();
});
}
JSON
{"Patatine":[
{"nome":"Fonzies", "croccantezza":"9", "gusto":7,
"rischio_dipendenza":10, "chimichevolezza":5},
{"nome":"Yonkers", "croccantezza":"6", "gusto":10,
"rischio_dipendenza":9, "chimichevolezza":9},
{"nome":"SanCarlo1933", "croccantezza":"10", "gusto":7,
"rischio_dipendenza":8, "chimichevolezza":3},
{"nome":"Pringles", "croccantezza":"7", "gusto":8,
"rischio_dipendenza":7, "chimichevolezza":9},
{"nome":"Dixi", "croccantezza":"6", "gusto":8,
"rischio_dipendenza":10, "chimichevolezza":6},
{"nome":"BBacon", "croccantezza":"7", "gusto":10,
"rischio_dipendenza":10, "chimichevolezza":9},
{"nome":"Virtual", "croccantezza":"8", "gusto":9,
"rischio_dipendenza":8, "chimichevolezza":8}
]}
JS fiddle :https://jsfiddle.net/3u40ox7u/4/ 有人有什么建议吗？
最佳答案
解决方法如下:
您可以替换这部分代码:
var data;
d3.json("./pata.json", function(data) {
console.log(data[1]);
var ndx = crossfilter(data);
与:
d3.json("./pata.json", function(data) {
console.log(data.Patatine);
data = data.Patatine
var ndx = crossfilter(data);
错误
Error: <path> attribute d: Expected number, "Mundefined,6V0Hun…".
来自您读取 json 文件的方式。
事实上，就在您的错误上方，在控制台中，您可能会看到:
undefined
来自 console.log(data[1]); 在:
var data;
d3.json("./pata.json", function(data) {
console.log(data[1]);
您的 json(列表)中感兴趣的数据实际上是 data.Patatine。因此，要打印 data[1]，您实际上应该使用 data.Patatine[1]
关于javascript - d3.js 不读取 JSON (d3.js + dc.js + crossfilter)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49276810/