1

D3.js を調べています。私は主に彼らのチュートリアルを使用して、私が持っているものを取得しました。しかし、私はいくつかの調整を行いました。私がやっていることは、特定のテーブル内のアクティブなアイテムと非アクティブなアイテムの数を数えることです。次に、それらの値を含むグラフを表示します。ほとんどすべてが正常に動作します。ただし、2つの問題があります。

  1. アイテムが削除されたときに、AJAX 呼び出しで自動的に更新されません。アイテムが追加されたときのみ更新されます。しかし、私はこの記事ではこれについて心配していません。
  2. 私の主な問題: 重複した値は個々の数値として扱われません。代わりに、[10,10] を認識し、グラフの 1 つのバーとして (2 つのバーではなく) 10 として出力します。

D3 ドキュメントを見ると、問題は .data にあるようです。ドキュメントには、データを結合することが記載されています。

$(document).on("DOMSubtreeModified DOMNodeRemoved", ".newsfeed", function() {
    var columns = ['created','deleted'];
    var data = [numN, numD];
    var y = d3.scale.linear()
            .domain([0, d3.max(data)])
            .range([0, 420]);
    var x = d3.scale.ordinal()
            .domain(columns)
            .rangeBands([0, 120]);
    chart.selectAll("rect")
            .data(data)
 //.enter().append("rect")
            .attr("x", x)
            .attr("height", y)
            .attr("width", x.rangeBand())
            .attr("rx", 10)
            .attr("ry", 10);
    chart.selectAll("text")
            .data(data)
 //.enter().append("text")
            .attr("y", y)
            .attr("x", function(d) {
        return x(d) + x.rangeBand() / 2;
    }) //offset
            .attr("dy", -10) // padding-right
            .attr("dx", ".35em") // vertical-align: middle
            .attr("text-anchor", "end") // text-align: right
            .text(String);
});

各値を表示するにはどうすればよいですか? 2 つの異なる値を渡すと、グラフは正常に表示されます。

4

1 に答える 1

2

あなたの問題はにあり.attr("x", x)ます。xしたがって、これを行う方法では、両方に同じ座標が割り当てられますrect。

したがって、x座標をオフセットしてみてください。

.attr("x", function(d, i) { x + i * width_of_your_rect); })
于 2013-03-06T23:37:29.987 に答える