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).

here's jsfiddle of graph

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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -