Question

我正在尝试用d3.js + dc.js + crossfilter可视化一些数据。我正在使用存储数据的JSON文件。但看起来d3并没有读取数据。

我做错了什么？

这是错误：d3.js：8756错误：属性d：预期数字，“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小提琴：https://jsfiddle.net/3u40ox7u/4/ 有人有什么建议吗？

Answer 1

以下是解决方案：

您可以替换此部分代码：

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]); in：

var data; 
d3.json("./pata.json", function(data) {
  console.log(data[1]);

您的json（列表）中感兴趣的数据实际上是data.Patatine。因此，要打印data[1]，您实际上应该使用data.Patatine[1]

d3.js没有读JSON（d3.js + dc.js + crossfilter）

1 个答案: