Javascript D3组间空间

如何在分组条形图中的组之间添加一些填充

我在x轴上有2个组和5个类别。我试图在两对之间获得一些填充（[group1，group2，]space，[group1，group2]，等等）。我尝试了rangeBand（），以及scale等，但它不起作用

有什么建议吗

守则的有关样本：

var values = feature.properties;              
var data = [
    {name:"NoDipOL",value:values["NoDipOL"]},
    {name:"NoDipNOL",value:values["NoDipNOL"]},
    {name:"HSOL",value:values["HSOL"]},
    {name:"HSNOL",value:values["HSNOL"]},
    {name:"ColOL",value:values["ColOL"]},
    {name:"ColNOL",value:values["ColNOL"]},
    {name:"UnOL",value:values["UnOL"]},
    {name:"UnNOL",value:values["UnNOL"]}
];

var Colors =  ["#a6cee3", "#1f78b4"];
var ColorNames = ["Group1", "Group2"];

[...] 

// Scale for x and y axis
var x = d3.scale.ordinal()
    .domain(["No diploma", "High school", "College", "University"])
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d){return d.value;})])
    .range([height, 0]);

//Ordinal x axis. 
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .outerTickSize(0);

[...]

bar.append("rect")
    .attr("x", function(d, i) { return i * barWidth;})
    .attr("width", barWidth - 1 )
    .attr("y", function(d) {return y(d.value); })
    .attr("height", function(d) {return height - y(d.value);})
    .attr("fill", function(d, i) { return Colors[i % 2]; }); //Alternate colors

bar.append("text")
    .attr("class", "text")
    .text(function(d) { return d.value; })
    .attr("y", function(d) {return y(d.value) - 5; })
    .attr("x", function(d, i) { return i * barWidth;})
    .attr("dx", barWidth / 2)
    .attr("fill", "black")
    .attr("font-family", "sans-serif")
    .attr("font-size", "14px")
    .attr("text-anchor", "middle");

---

您可以使用

范围带

来放置刻度，但不能使用它来调整矩形的大小和位置。首先修复数据，使其可以使用

量程

：

var data = [
    {name:"No diploma",value:values["NoDipOL"]},
    {name:"No diploma",value:values["NoDipNOL"]},
    {name:"High school",value:values["HSOL"]},
    {name:"High school",value:values["HSNOL"]},
    {name:"College",value:values["ColOL"]},
    {name:"College",value:values["ColNOL"]},
    {name:"University",value:values["UnOL"]},
    {name:"University",value:values["UnNOL"]}
];

然后放置你的直肠：

bar.append("rect")
    .attr("x", function(d, i) { 
        return (i % 2 === 0) ? // every other bar
            x(d.name) : // if even place at start of band
            x(d.name) + x.rangeBand()/2; // if odd (second bar) move it over
    })
    .attr("width", x.rangeBand()/2 )  // and width is half the rangeband
    ...

---

更新。

我们是否应该在您链接的JSFIDLE中看到图表？我刚刚看到一张北美地图。我调整了视图使其更清晰。马克，我试图使用rangeBand（）来放置矩形，但它不起作用。我得到了重叠的酒吧。我从未想过改变数据的定义方式。你在“x”上做的那个功能对我来说是新的。谢谢大家!@Monduiz，你有一个有序的刻度，

x

（这是一个函数），它的域是

[“没有文凭”，“高中”，“学院”，“大学”]

，

x（d.name）

只是调用你的刻度函数，传递到一个域位置，

x（'College'）

，这将返回刻度上对应的像素x位置。谢谢马克，我很感激！