如何使用 D3 选择 JSON 数组.js 使用 .算子
How to select JSON arrays with D3.js with . operator
Im使用 D3.js 从 JSON 文件创建条形图。我希望用户通过不同的年份和不同的国家/地区进行筛选。我似乎无法弄清楚如何从 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);
})
条形函数
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 阵列之间切换(将来会更多),但请记住上次选择的年份?
问题似乎是你试图让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。
相关文章:
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- JS-使用Ajax获取文件名
- 基本D3.js:使用数据键
- Angular Js-使用特定键打印数组
- node.js使用monk从数组中按id获取文档
- Angular.js:使用ng repeat创建2个html容器
- 使用history.js使用多个GET参数
- Node.js使用派生两个子进程,然后两个子进程如何相互交换
- Pdf.js:使用base64文件源而不是url来呈现Pdf文件
- Passport.js:使用主干网访问用户
- 图表.js 2.0 使用货币和千位分隔符格式化 Y 轴
- fabric.js:使用 Image.set() 调整图像大小是否会降低图像质量
- 整页.js使用连续滚动或循环时禁用 moveSectionUp
- 节点.js 使用可写流写入文件时出现 EBADF 错误
- 如何获得pickadate.js使用JAWS屏幕阅读器
- JS使用不同的填充
- 选择2 JS使用Ajax加载远程数据
- 从 Node.JS使用 MailGun 发送 HTML 电子邮件
- 如何让node.js使用CFML风格的#hashed#变量
- 使用主干网.js使用“d”从 ASMX 获取数据