如何 select JSON 数组与 D3.js 与 .操作员
How to select JSON arrays with D3.js with . operator
我正在使用 D3.js 从 JSON 文件创建条形图。我希望用户过滤不同的年份和不同的国家。我似乎无法弄清楚如何 select 来自 JSON 文件的不同数组。
我的 JSON 是这样设置的:(可能是错误的)
var NL = [
j1996 = [20317, 27395, 29273, 27170, 19441],
j1997 = [25267, 31331, 35193, 35299, 23005],
j1998 = [25576, 30643, 35484, 35796, 23343]
]
var BE = [
j1996 = [52317, 17395, 39273, 47170, 39441],
j1997 = [35267, 13331, 15193, 15299, 13005],
j1998 = [15576, 20643, 14284, 25796, 13343]
]
然后我有加载不同年份数据的按钮:
d3.select("#button1996")
.on("click", function (d, i) {
bars(j1996);
})
d3.select("#button1997")
.on("click", function (d, i) {
bars(j1997);
})
d3.select("#button1998")
.on("click", function (d, i) {
bars(j1998);
})
bars 函数
function bars(data) {
max = d3.max(data)
var yScale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, height])
var xScale = d3.scale.ordinal()
.domain(d3.range(0, data.length))
.rangeBands([0, width], .2)
var myChart = d3.select("#chart")
var bars = myChart.selectAll("rect.bar")
.data(data)
//enter
bars.enter()
.append("svg:rect")
.attr("class", "bar")
.style('fill', '#C64567')
.attr('width', xScale.rangeBand())
.attr('x', function(d,i){ return xScale(i); })
.attr('height', 0)
.attr('y', height)
}
这有效
d3.select("#button1996")
.on("click", function (d, i) {
bars(NL[0]);
})
如何在 NL 和 BE 数组之间切换(将来会更多)但记得最后 selected 的年份?
问题似乎是您试图让 NL
既是数组又是对象。
你的声明
var NL = [
j1996 = [20317, 27395, 29273, 27170, 19441],
j1997 = [25267, 31331, 35193, 35299, 23005],
j1998 = [25576, 30643, 35484, 35796, 23343]
]
给出与
相同的结果
var NL = [
[20317, 27395, 29273, 27170, 19441],
[25267, 31331, 35193, 35299, 23005],
[25576, 30643, 35484, 35796, 23343]
]
即,它是一个数组数组。所以没有希望以这种方式访问 NL.j1996(确切地说,你也在影响每个数组到相应的 全局变量 j199x
)。
如果要使用NL
作为对象,语法如下:
var NL = {
j1996 : [20317, 27395, 29273, 27170, 19441],
j1997 : [25267, 31331, 35193, 35299, 23005],
j1998 : [25576, 30643, 35484, 35796, 23343]
}
那么NL.j1996
就不会再产生错误了。
var NL = [
j1996 = [20317, 27395, 29273, 27170, 19441],
j1997 = [25267, 31331, 35193, 35299, 23005],
j1998 = [25576, 30643, 35484, 35796, 23343]
]
var BE = [
j1996 = [52317, 17395, 39273, 47170, 39441],
j1997 = [35267, 13331, 15193, 15299, 13005],
j1998 = [15576, 20643, 14284, 25796, 13343]
]
这是错误的格式,NL 和 BE 应该是包含数组的对象,如下所示:
var NL = {
j1996 : [20317, 27395, 29273, 27170, 19441],
j1997 : [25267, 31331, 35193, 35299, 23005],
j1998 : [25576, 30643, 35484, 35796, 23343]
}
var BE = {
j1996 : [52317, 17395, 39273, 47170, 39441],
j1997 : [35267, 13331, 15193, 15299, 13005],
j1998 : [15576, 20643, 14284, 25796, 13343]
}
因为它是一个对象,所以您不能这样称呼它:
d3.select("#button1996")
.on("click", function (d, i) {
bars(NL[0]);
})
你必须做的:
d3.select("#button1996")
.on("click", function (d, i) {
bars(NL['j1996']);// or
//bars(NL.j1996);
})
你 JSON 的格式有误。
使用类似的东西。您可以通过以下方式访问您的数据:
data.NL[0], etc
您的 JSON 应具有以下格式:
{
"NL": [{
"j1996": [20317, 27395, 29273, 27170, 19441],
"j1997": [20317, 27395, 29273, 27170, 19441],
"j1998": [20317, 27395, 29273, 27170, 19441]
}],
"NL": [{
"j1996": [20317, 27395, 29273, 27170, 19441],
"j1997": [20317, 27395, 29273, 27170, 19441],
"j1998": [20317, 27395, 29273, 27170, 19441]
}]
}
不要忘记使用 http://jsonlint.com/.
等工具验证您的 JSON
我正在使用 D3.js 从 JSON 文件创建条形图。我希望用户过滤不同的年份和不同的国家。我似乎无法弄清楚如何 select 来自 JSON 文件的不同数组。
我的 JSON 是这样设置的:(可能是错误的)
var NL = [
j1996 = [20317, 27395, 29273, 27170, 19441],
j1997 = [25267, 31331, 35193, 35299, 23005],
j1998 = [25576, 30643, 35484, 35796, 23343]
]
var BE = [
j1996 = [52317, 17395, 39273, 47170, 39441],
j1997 = [35267, 13331, 15193, 15299, 13005],
j1998 = [15576, 20643, 14284, 25796, 13343]
]
然后我有加载不同年份数据的按钮:
d3.select("#button1996")
.on("click", function (d, i) {
bars(j1996);
})
d3.select("#button1997")
.on("click", function (d, i) {
bars(j1997);
})
d3.select("#button1998")
.on("click", function (d, i) {
bars(j1998);
})
bars 函数
function bars(data) {
max = d3.max(data)
var yScale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, height])
var xScale = d3.scale.ordinal()
.domain(d3.range(0, data.length))
.rangeBands([0, width], .2)
var myChart = d3.select("#chart")
var bars = myChart.selectAll("rect.bar")
.data(data)
//enter
bars.enter()
.append("svg:rect")
.attr("class", "bar")
.style('fill', '#C64567')
.attr('width', xScale.rangeBand())
.attr('x', function(d,i){ return xScale(i); })
.attr('height', 0)
.attr('y', height)
}
这有效
d3.select("#button1996")
.on("click", function (d, i) {
bars(NL[0]);
})
如何在 NL 和 BE 数组之间切换(将来会更多)但记得最后 selected 的年份?
问题似乎是您试图让 NL
既是数组又是对象。
你的声明
var NL = [
j1996 = [20317, 27395, 29273, 27170, 19441],
j1997 = [25267, 31331, 35193, 35299, 23005],
j1998 = [25576, 30643, 35484, 35796, 23343]
]
给出与
相同的结果var NL = [
[20317, 27395, 29273, 27170, 19441],
[25267, 31331, 35193, 35299, 23005],
[25576, 30643, 35484, 35796, 23343]
]
即,它是一个数组数组。所以没有希望以这种方式访问 NL.j1996(确切地说,你也在影响每个数组到相应的 全局变量 j199x
)。
如果要使用NL
作为对象,语法如下:
var NL = {
j1996 : [20317, 27395, 29273, 27170, 19441],
j1997 : [25267, 31331, 35193, 35299, 23005],
j1998 : [25576, 30643, 35484, 35796, 23343]
}
那么NL.j1996
就不会再产生错误了。
var NL = [
j1996 = [20317, 27395, 29273, 27170, 19441],
j1997 = [25267, 31331, 35193, 35299, 23005],
j1998 = [25576, 30643, 35484, 35796, 23343]
]
var BE = [
j1996 = [52317, 17395, 39273, 47170, 39441],
j1997 = [35267, 13331, 15193, 15299, 13005],
j1998 = [15576, 20643, 14284, 25796, 13343]
]
这是错误的格式,NL 和 BE 应该是包含数组的对象,如下所示:
var NL = {
j1996 : [20317, 27395, 29273, 27170, 19441],
j1997 : [25267, 31331, 35193, 35299, 23005],
j1998 : [25576, 30643, 35484, 35796, 23343]
}
var BE = {
j1996 : [52317, 17395, 39273, 47170, 39441],
j1997 : [35267, 13331, 15193, 15299, 13005],
j1998 : [15576, 20643, 14284, 25796, 13343]
}
因为它是一个对象,所以您不能这样称呼它:
d3.select("#button1996")
.on("click", function (d, i) {
bars(NL[0]);
})
你必须做的:
d3.select("#button1996")
.on("click", function (d, i) {
bars(NL['j1996']);// or
//bars(NL.j1996);
})
你 JSON 的格式有误。 使用类似的东西。您可以通过以下方式访问您的数据:
data.NL[0], etc
您的 JSON 应具有以下格式:
{
"NL": [{
"j1996": [20317, 27395, 29273, 27170, 19441],
"j1997": [20317, 27395, 29273, 27170, 19441],
"j1998": [20317, 27395, 29273, 27170, 19441]
}],
"NL": [{
"j1996": [20317, 27395, 29273, 27170, 19441],
"j1997": [20317, 27395, 29273, 27170, 19441],
"j1998": [20317, 27395, 29273, 27170, 19441]
}]
}
不要忘记使用 http://jsonlint.com/.
等工具验证您的 JSON