如何用D3.js選擇JSON數組。運算符

Im使用D3.js從JSON文件創建條形圖。我希望用戶通過不同的年份和不同的國家進行篩選。我似乎無法弄清楚如何從JSON文件中選擇不同的數組。如何用D3.js選擇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陣列之間切換（在未來更多）但記住上次選擇的年份？

來源

2016-02-25 user1892747

你的'酒吧'功能是什麼樣子？您需要添加更多代碼... – thatOneGuy

感謝您的關注！我已經添加了條形函數，並在底部稍微修改了這個問題。 – user1892747

問題似乎是您試圖讓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不會再產生錯誤。

來源

2016-02-25 14:30:30 tarulen

感謝您的解釋！奇蹟般有效！ – user1892747

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); 
    })

來源

2016-02-25 14:31:21 thatOneGuy

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

}

不要忘了像http://jsonlint.com/工具來驗證您的JSON。

來源

2016-02-25 14:35:14 HugoLasticot

如何用D3.js選擇JSON數組。運算符

回答

相關問題