Javascript 如何使用D3.js选择JSON数组。操作人员

Im使用D3.js从JSON文件创建条形图。我想让用户通过不同的年份和不同的国家进行过滤。我似乎不知道如何从JSON文件中选择不同的数组

我的JSON设置如下：（这可能是错误的）

然后我用按钮加载不同年份的数据：

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]
]

i、 例如，它是一个数组的数组。因此，不希望以这种方式访问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

将不再创建错误。

问题似乎是您试图将

NL

同时作为数组和对象

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]
] 

你的声明

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]
]

i、 例如，它是一个数组的数组。因此，不希望以这种方式访问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);
    })

这是错误的格式，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);
    })

---

Yout 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]
}]

}

---

不要忘了使用类似的工具验证JSON。

Yout 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]
}]

}

---

别忘了用类似的工具验证JSON。

你的“条”函数是什么样子的？您需要添加更多代码…感谢您的关注！我已经添加了bars函数，并在底部稍微重新表述了这个问题。你的“bars”函数是什么样子的？您需要添加更多代码…感谢您的关注！我已经添加了bars函数，并在底部稍微重新表述了这个问题。谢谢你的解释！工作起来很有魅力！谢谢你的解释！工作起来很有魅力！