改變D3條形圖中特定條形之間的差距

我有一張條形圖，我想讓我的圖表中的第6和條形以及圖表中的第12和第13條形間的差距更加明顯。現在我使用的是.rangeRoundBands，這導致了填充效果，並且似乎沒有辦法覆蓋特定矩形的方法（我試圖在沒有成功的情況下將填充和邊距附加到特定的矩形上）。改變D3條形圖中特定條形之間的差距

Here's a jsfiddle of the graph

而且我產生了帶和酒吧本身代碼：

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

來源

2013-08-26 Mike

你可以提供一個函數來計算基於數據和指數的高度。也就是說，你可以使用類似

.attr("height", function(d,i) { 
      if(i == 5) { 
       return 5; 
      } 
      return yScale.rangeBand(); 
     })

使第6個條5個像素高。您當然可以將此值設爲yScale.rangeBand()，即減去一定數量以使間隙更寬。

來源

2013-08-26 13:34:43

嘿拉爾斯，我想類似的東西，雖然這使得酒吧本身「高」它不會改變吧的填充（並最終只具有欄溢出到旁邊的酒吧） - 不知何故你需要找到一種重新計算yScale的方法（更重要的是單杆的填充） – Mike

這裏沒有填充 - 它隱含在欄的高度。所以，如果你想要更多的填充，減少酒吧的高度。 –

改變D3條形圖中特定條形之間的差距

回答

相關問題