javascript - How can I add space in the label of a graph made with dimple.js? -
i doing barplot dimple.js. code following:
var data = [{x:1, y:10}, {x:2, y:15}, {x:3,y:27}] var svg; var chart; var svg = dimple.newsvg("body", 800, 600); var chart = new dimple.chart(svg, data); chart.defaultcolors = [ new dimple.color("#ff0000", "blue"), // set red fill blue stroke new dimple.color("#00ff00"), // set green fill darker green stroke new dimple.color("rgb(0, 0, 255)") // set blue fill darker blue stroke ]; x = chart.addcategoryaxis("x", "x"); chart.addmeasureaxis("y", "y"); chart.addseries("country", dimple.plot.bar); x.addorderrule("x"); chart.draw();
it works fine when have 3 (or few) data points, when have more 2 hundred data points, x axis becomes cluttered units. there way show units in x label every n
points? (so instead of showing 1,2,3... shows 1, n+1, 2*n+1,...) ?
you can modify after draw d3. here method remove labels leaving every nth one:
// pass in axis object , interval. var cleanaxis = function (axis, oneinevery) { // should have been called after draw, otherwise nothing if (axis.shapes.length > 0) { // leave first label var del = false; // if there interval set if (oneinevery > 1) { // operate on axis text axis.shapes.selectall("text").each(function (d) { // remove nth label if (del % oneinevery !== 0) { this.remove(); // find corresponding tick line , remove axis.shapes.selectall("line").each(function (d2) { if (d === d2) { this.remove(); } }); } del += 1; }); } } };
here's fiddle working case yours:
(i've updated order rule avoid problems string ordering)
Comments
Post a Comment