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