D3分組吧

Question

我想弄清楚分組2條的方法，然後在它們之間留下一些間距。有沒有辦法在D3中做到這一點？我正在遵循的示例是http://codepen.io/mbostock/pen/Jaemg。

var data = [4, 8, 15, 16, 23, 42]; 

var x = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, 420]); 

d3.select(".chart") 
    .selectAll("div") 
    .data(data) 
    .enter().append("div") 
    .style("width", function(d) { return x(d) + "px"; }) 
    .text(function(d) { return d; }); 

非常感謝提前。

Answer 1

這裏的結果：https://jsfiddle.net/umeqw2f8/3/

我已經改變了自己的風格功能有點兒實現這一目標：

.style("width", function(d,i) { 
    if(i % 2 == 0 && i != 0){ 
    d3.select(this).style("margin-top", 5+"px") 
    }else if(i == 0){} 

    return x(d) + "px"; }) 

您可以更改模係數不同大小分組。例如，對於3號組：if(i % 3 == 0 && i != 0){

Answer 2

想法是將DIV中的條形組合起來，並用一些邊距或填充分隔組合div。

var data = [4, 8, 15, 16, 23, 42]; 

var gData=[]; 
for(var i=0;i<data.length/2;i++){ 
    gData[i]={ 
    "before":data[i*2], 
    "after":data[i*2+1] 
    }; 
} 
console.log(gData); 
var x = d3.scale.linear() 
    .domain([0, d3.max(data)]) 
    .range([0, 420]); 

myBarsEnter=d3.select(".chart") 
    .selectAll("div.bars") 
    .data(gData).enter().append('div').attr('class','bargroup'); 
    myBarsEnter.append('div') 
      .style("width", function(d) { return x(d.before) + "px"; }) 
      .text(function(d) { return d.before; }); 
myBarsEnter.append('div') 
      .style("width", function(d) { return x(d.after) + "px"; }) 
      .text(function(d) { return d.after; }); 

和更新的CSS是

.chart .bargroup{ 
margin-bottom:10px; 
} 
.chart .bargroup div { 
    font: 10px sans-serif; 
    background-color: steelblue; 
    text-align: right; 
    padding: 3px; 
    margin: 1px; 
    color: white; 
} 

您可以在下面的鏈接找到更新的代碼。

http://codepen.io/anon/pen/YqJpzK