CODEWITHSUNDEEP
d3.jsdimple.js
ne8il
ne8il

Reputation: 2427

Dimple.js Axis Labels

I have a dataset where each row has an id and a name property. The id property is the unique key, the names may be duplicated. I want the name to be shown on the category axis of a Dimple.js chart.

If I use "name" as the argument to chart.addCategoryAxis, the correct labels are drawn, but users with duplicate names are grouped into single bars. If I use "id" as the argument, the bars are separated but with the wrong labels.

Is there a "Dimple" way to achieve this, or should I just either :

Illustration of this (click the switch button to see what I mean) : http://jsbin.com/bupamo/4/edit?js,output

Upvotes: 4

Views: 2537

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

Thanks for the nice clear explanation. This isn't really something which is native to dimple, however you can achieve it by drawing with the id and replacing them after the fact:

You will also need to make a couple of other tweaks like this:

// Set the title before drawing
xAxis.title = 'name';
// Draw the axis with id's
chart.draw(0, false);
// Now set the category fields to name so that the tooltips are correct
xAxis.categoryFields = ['name'];
// Select the ID labels and replace the text with names
xAxis.shapes
   .selectAll("text")
       .text(function (d) { 
           var i;
           for (i = 0; i < initialData.length; i += 1) {
               if (initialData[i].id === d) {
                   return initialData[i].name;
               }
           }
       });

http://jsbin.com/lezocu/4/edit?js,output

Upvotes: 4

Related Questions