D3 Gruppierungsbalken

Question

Ich versuche einen Weg zu finden, 2 Balken zu gruppieren und dann einen Abstand zwischen ihnen zu lassen. Gibt es eine Möglichkeit, dies in D3 zu tun? Das Beispiel, dem ich folge, ist 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; }); 

Vielen Dank im Voraus.

Answer 1

Hier ist das Ergebnis: https://jsfiddle.net/umeqw2f8/3/

ich Ihre Style-Funktion ein wenig verändert haben, dies zu erreichen:

.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"; }) 

Sie können für verschiedene Größen der Gruppierung der Modulo-Faktor ändern. Zum Beispiel für Gruppe der Nummer 3: if(i % 3 == 0 && i != 0){

Answer 2

Die Idee ist, die Balken in DIV zu gruppieren und die Gruppen-Divs mit einem gewissen Abstand oder Padding zu trennen.

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; }); 

und aktualisiert CSS ist

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

Sie aktualisiert Code auf folgenden Link zu finden.

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