إضافة تسميات إلى مخطط شريطي d3

Question

لدي مخطط شريطي d3 أقوم بسحب البيانات من Firebase له.أريد إضافة التسميات إلى المحور السيني.إليك رمز المخطط الشريطي الخاص بي:

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 هو العدد البسيط للتكرارات ويتم عرضه على المحور السيني.أريد أن يتم عرض الأسماء المخزنة في متغير magLabel أسفل الأعداد.شكرًا.

Answer 1

للرجوع إليها:في التعليقات على @bencripps الإجابة ، المرجع يتحدث عن استخدام 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 بالمخطط الخاص بك.