javascript - Varying the gaps between specific bars in a D3 bar chart -
i have bar chart want make gap more pronounced between 6th , bar in chart , 12th , 13th bar in chart. right i'm using .rangeroundbands
results in padding , there doesn't seem way override specific rectangles (i tried appending padding , margins particular rectangle no success).
and code generating bands , bars themselves:
var yscale = d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeroundbands([padding, h- padding], 0.05); svg.selectall("rect.bars") .data(dataset) .enter() .append("rect") .attr("class", "bars") .attr("x", 0 + padding) .attr("y", function(d, i){ return yscale(i); }) .attr("width", function(d) { return xscale(d.values[0]); }) .attr("height", yscale.rangeband())
you can provide function calculate height based on data , index. is, use like
.attr("height", function(d,i) { if(i == 5) { return 5; } return yscale.rangeband(); })
to make 6th bar 5 pixels high. can of course base value on yscale.rangeband()
, i.e. subtract number make gap wider.
Comments
Post a Comment