0

私は次のような序数スケールを作成しています:

var x = d3.scale.ordinal()
          .domain(["b1", "b2", "b3", "b4", "b5"])
          .rangeBands([0, width], .1);

このスケールを軸で使用すると、次のようになります。

var xaxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

svg.append("g")
   .attr("class", "axis")
   .call(xaxis)
   .attr("transform", "translate(" + 0 + "," + height + ")");

軸が 5 本のバーを含む棒グラフでレンダリングされると、最後に数字が追加されることがわかりました。だから私は得る：

b1,b2,b3,b4,b5,0,1,2,3,4.

また、バーはティックに整列していません。

b1,b2,b3,b4,b55 本のバーを下回るように軸を動作させるにはどうすればよいですか?

関数全体は次のとおりです。

  function barchart_2d_array(width, height, barwidth, data, target_div){


    var margin = {top: 20, right: 20, bottom: 30, left: 40},
        w = width + margin.left + margin.right,
        h = height + margin.top + margin.bottom;



    var dataset = data;

    values_arr=[];

    for(var o in dataset){
        values_arr.push(dataset[o]);
    }

    var x = d3.scale.ordinal()
                    .rangeBands([0, width], .1);



    var y = d3.scale.linear()
                    .domain([0,d3.max(values_arr)])
                    .range([height,0]);



    var svg = d3.select(target_div)
                .append("svg")
                .attr("width", w)
                .attr("height", h)
                .attr("style","border : 1px solid black")
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    x.domain(["b1", "b2", "b3", "b4", "b5"]);

    window.x=x;
    window.width=width;

    svg.selectAll("rect")
        .data(values_arr)
        .enter()
        .append("rect")
        .attr("x",function(d,i){
            return x(i);
        })
        .attr("y",function(d,i){
            return y(d);
        })
        .attr("width",barwidth)
        .attr("height",function(d,i){
            return height - y(d);
        });

    var yaxis = d3.svg.axis()
                      .scale(y)
                      .orient("left")
                      .ticks(5);

    var xaxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom");

    svg.append("g")
        .attr("class", "axis")
        .call(yaxis);

    svg.append("g")
        .attr("class", "axis")
        .call(xaxis)
        .attr("transform", "translate(" + 0 + "," + height + ")");

};

これは私がそれを呼び出す方法です：

<div id="bar_chart">

</div>
<script>
    var dataset = { "b1":100, "b2":200, "b3":300, "b4":400, "b5":500 };

    a = barchart_2d_array(400,200, 5,dataset,"#bar_chart");

</script>
4

1 に答える 1

1

D3 の序数スケールは、値が以前に見られなかった場合、ドメインに値を暗黙的に追加します。コードは、この関数で表示されている追加の値を渡しています。

.attr("x",function(d,i){
    return x(i);
})

i0 から始まる選択範囲内のノードのインデックスです。

バインドしているデータ セットをもう一度確認する必要があります。これは、意図したとおりに機能しているとは思わないためです。データ オブジェクトを配列に変換しますが、その過程でプロパティ名を削除しています。配列には、スケールが期待[100, 200, 300, 400, 500]するバー名ではなく、値 ( )のみが含まれます。x

おそらく、配列をより似たものにしたい場合は、次のよう[{name: b1, value: 100}, {name: b2, value: 200}...]にデータをスケーリングできます。xy

.attr("x",function(d) {
    return x(d.name);
})
.attr("y",function(d) {
    return y(d.value);
})

バインドされたデータの形状を正しく取得したら、他のすべてが適切に収まるはずです。

于 2013-07-31T05:33:53.403 に答える