라벨을 추가하 d3 바 차트

Question

나는 d3 막대 그래프에 대한 데이터를 가져서 중포 기지.을 추가하고 싶은 레이블을 x 축이 있습니다.여기에는 코드의 막대 그래프:

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

    });

magValue 은 간단한 수의 존재와 그것은 diplayd x-axis.이에 저장되는 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);

.

note , .call(xAxis)는 실제로 X 축을 차트에 추가하는 것입니다.