D3バーチャートにラベルを追加します

Question

私はFirebaseからデータを引き出すD3バーチャートを持っています。ラベルをX軸に追加したいです。これが私のBarchartのコードです：

new Firebase('https://exampl.firebaseIO.com/example').on('value', function (snapshot) {
    var lst = [];
    snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});
    var magValue = new crossfilter(lst).dimension(function (d) {return d.count;});
    var magLabel = new crossfilter(lst).dimension(function (d) {return d.Owner;});

    dc.barChart("#dc-magnitude-chart")
        .width(480)
        .height(150)
        .margins({top: 10, right: 10, bottom: 20, left: 40})
        .dimension(magValue)    // the values across the x axis
        .group(magValue.group().reduceSum(function(d) {return d.count;}))                            // the values on the y axis
        .transitionDuration(500)
        .centerBar(true)    
        .gap(56)       // bar width Keep increasing to get right then back off.
        .x(d3.scale.linear().domain([0.5, 7.5]))
        .elasticY(true)
        .xAxis().tickFormat(function(v) {return v;}); 
    dc.renderAll();

    });

.

マグバールは発生の単純な数であり、x軸上のディプルドです。Maglabel変数に格納されている名前は、カウントの下に表示されます。ありがとう。

Answer 1

参照：@bencrippsの回答のコメントでは、opはxAxis.tickValues(['One','two','three','four','five','six','seven'])を使用することについての協議です。

tickValuesは、使用しているスケール内でカスタム目盛を指定したい場合は実際にあります。今、あなたは線形スケールを使っています：

.x(d3.scale.linear().domain([0.5, 7.5]))

.

だからそれはあなたの目盛り値がそれがティックを描くことができるそのスケール上のポイントになることを期待しています。 xAxis.tickValues([1, 2, 3, 4, 5, 6, 7])のようなものがある場合は、それは機能するはずです。

しかし、それは実際には線形スケールを望んでいないように聞こえます。 D3は他のスケールタイプもあり、あなたが望むもののように聞こえます序数。序数スケールは、通常は棒グラフの場合はスケールです。それらは離散的なドメインを持つスケールの種類です。この場合、あなたのスケールを次のようなものに変えることを試みることができます。

.x(d3.scale.ordinal().domain(['One','two','three','four','five','six','seven']))

.

その代わりに序数スケールを使用します。 dc.jsを使用しているので、

も指定する必要があります。

.xUnits(dc.units.ordinal)

.

序数マークを使うことを知っています。

Answer 2

X軸を追加するための簡単なコードです。あなたはドメインを使っていなければならず、そして目的の長さと目盛り数を取得するための範囲です。

var XaxisScale = d3.scale.linear()
    .domain([0,150]) //you will have to set the domain, not sure what you want
    .range([0, magValue.length)

var xAxis = d3.svg.axis()
    .scale(XaxisScale)
    .ticks( magValue.length ) // this you will need to set as well

var xAxisGroup = $('"#dc-magnitude-chart').append("g")
    .attr('class', 'axis')
    .attr('transform', 'translate(5,8)')
    .call(xAxis);

.

注、.call(xAxis)は実際にチャートにX軸を追加するものです。