d3.js 不读取 JSON (d3.js + dc.js + crossfilter)答案

【问题标题】：d3.js not reading JSON (d3.js + dc.js + crossfilter)d3.js 不读取 JSON (d3.js + dc.js + crossfilter)
【发布时间】：2018-08-22 22:15:39
【问题描述】：

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

我做错了什么？

这是错误：d3.js:8756 错误：属性 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>

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/ 有人有什么建议吗？

【问题讨论】：

您能否将您的代码包含在javascript/html/css snippet 中？这样我们就可以重现您的错误。现在我无法让它工作，因为有很多错误，其中一些是由于依赖关系，而这些都不是你的错误。
@XavierGuihot 谢谢！我添加了一个 JS Fiddle！
index_json.js 和 index.css 怎么样？
index.css 是一个旧的 css...没用...index.json.js 是 js 部分中的代码 @XavierGuihot
我做错了吗？

标签： javascript json d3.js dc.js crossfilter

【解决方案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]

【讨论】：