如何调用嵌套 JSON 数据中的所有值 (d3js)
How to call all values in nested JSON data (d3js)
我的数据结构为 JSON,看起来像这样(实际数据要大得多,每个实例都有更多的变量和属性):
var json = [
{
"CLIN": "1",
"cost": 257,
},
{
"CLIN": "1",
"cost": 846,
},
{
"CLIN": "2",
"cost": 162
},
{
"CLIN": "2",
"cost": 984
}]
这是我的 JS 代码的样子:
<script>
var margin = {top: 20, right: 160, bottom: 35, left: 30};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate('+ margin.left + "," + margin.top + ")");
var dataByCLIN = d3.nest()
.key(function(d) {return d.CLIN; })
.entries(json);
</script>
CLIN属性嵌套数据成功。但是,当我尝试传递所有四个变量来为我的条形图创建四个矩形时,它不会 return 任何值
var bars = svg.selectAll('rect')
.data(dataByCLIN)
.enter()
.append('rect')
.attr('width', function(d) { return d.values.cost; })
.attr('height', 10)
.attr('y', function(d, i) { return i * 20; });
如果我运行下面的代码带有各种数组select离子:
console.log(dataByCLIN[0].values[0].cost)
它return是我需要的值,但是代码:
.attr('width', function(d, i, j) { return d[i].values[j].cost;
无效。控制台抛出错误
Cannot read property 'values' of undefined
我知道如何 select 我需要的数据,但不知道如何将数据传递给 d3 函数的正确格式。
你可以做的是为你的数据使用 for/forEach
dataByCLIN
并在每个循环中创建 rects
像这样:
var bars = svg.selectAll('.rects');
dataByCLIN.forEach(function(d,i1) {
bars.data(d.values).enter().append('rect').attr('class', 'rects')
.attr('width', function(d) {
return d.cost;
})
.attr('height', 10)
.attr('y', function(d, i) {
return (i+i1+i1+1) * 20 - 20;
});
});
这是一个fiddle:
var json = [{
"CLIN": "1",
"cost": 257,
},
{
"CLIN": "1",
"cost": 846,
},
{
"CLIN": "2",
"cost": 162
},
{
"CLIN": "2",
"cost": 984
}
];
var margin = {
top: 20,
right: 160,
bottom: 35,
left: 30
};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + "," + margin.top + ")");
var dataByCLIN = d3.nest()
.key(function(d) {
return d.CLIN;
})
.entries(json);
var bars = svg.selectAll('.rects');
dataByCLIN.forEach(function(d, i1) {
bars.data(d.values).enter().append('rect').attr('class', 'rects')
.attr('width', function(d) {
return d.cost;
})
.attr('height', 10)
.attr('y', function(d, i) {
return (i + i1 + i1 + 1) * 20 - 20;
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
我的数据结构为 JSON,看起来像这样(实际数据要大得多,每个实例都有更多的变量和属性):
var json = [
{
"CLIN": "1",
"cost": 257,
},
{
"CLIN": "1",
"cost": 846,
},
{
"CLIN": "2",
"cost": 162
},
{
"CLIN": "2",
"cost": 984
}]
这是我的 JS 代码的样子:
<script>
var margin = {top: 20, right: 160, bottom: 35, left: 30};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate('+ margin.left + "," + margin.top + ")");
var dataByCLIN = d3.nest()
.key(function(d) {return d.CLIN; })
.entries(json);
</script>
CLIN属性嵌套数据成功。但是,当我尝试传递所有四个变量来为我的条形图创建四个矩形时,它不会 return 任何值
var bars = svg.selectAll('rect')
.data(dataByCLIN)
.enter()
.append('rect')
.attr('width', function(d) { return d.values.cost; })
.attr('height', 10)
.attr('y', function(d, i) { return i * 20; });
如果我运行下面的代码带有各种数组select离子:
console.log(dataByCLIN[0].values[0].cost)
它return是我需要的值,但是代码:
.attr('width', function(d, i, j) { return d[i].values[j].cost;
无效。控制台抛出错误
Cannot read property 'values' of undefined
我知道如何 select 我需要的数据,但不知道如何将数据传递给 d3 函数的正确格式。
你可以做的是为你的数据使用 for/forEach
dataByCLIN
并在每个循环中创建 rects
像这样:
var bars = svg.selectAll('.rects');
dataByCLIN.forEach(function(d,i1) {
bars.data(d.values).enter().append('rect').attr('class', 'rects')
.attr('width', function(d) {
return d.cost;
})
.attr('height', 10)
.attr('y', function(d, i) {
return (i+i1+i1+1) * 20 - 20;
});
});
这是一个fiddle:
var json = [{
"CLIN": "1",
"cost": 257,
},
{
"CLIN": "1",
"cost": 846,
},
{
"CLIN": "2",
"cost": 162
},
{
"CLIN": "2",
"cost": 984
}
];
var margin = {
top: 20,
right: 160,
bottom: 35,
left: 30
};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + "," + margin.top + ")");
var dataByCLIN = d3.nest()
.key(function(d) {
return d.CLIN;
})
.entries(json);
var bars = svg.selectAll('.rects');
dataByCLIN.forEach(function(d, i1) {
bars.data(d.values).enter().append('rect').attr('class', 'rects')
.attr('width', function(d) {
return d.cost;
})
.attr('height', 10)
.attr('y', function(d, i) {
return (i + i1 + i1 + 1) * 20 - 20;
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>