0

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 配列を切り替えるにはどうすればよいですか (将来的にはそれ以上)、最後に選択された年を覚えていますか?

4

3 に答える 3

3

問題は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-25T14:30:30.697 に答える
0 
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-25T14:31:21.067 に答える