D3为特定系列分配颜色

我想为数据中的两个系列分配两种颜色，以便当我按升序或降序排序时，每个组的颜色保持相同。

数据以编程方式从网络地图功能中提取。我以为我可以使用交替功能来分配颜色，但是如果我使用排序，这是行不通的。我正在尝试寻找一种适当的方法来为系列指定颜色。

我正在使用的数据将OL和NOL分为两组。您可以在下面看到其结构。

jsfiddle

相关代码：

var values = feature.properties;              
var data = [
    {name:"N11OL",value:values["N11OL"]},
    {name:"N11NOL",value:values["N11NOL"]},
    {name:"N21OL",value:values["N21OL"]},
    {name:"N21NOL",value:values["N21NOL"]},
    {name:"N22OL",value:values["N22OL"]},
    {name:"N22NOL",value:values["N22NOL"]},
    {name:"N23OL",value:values["N23OL"]},
    {name:"N23NOL",value:values["N23NOL"]},
    {name:"N31_33OL",value:values["N31_33OL"]},
    {name:"N31_33NOL",value:values["N31_33NOL"]},
    {name:"N41OL",value:values["N41OL"]},
    {name:"N41NOL",value:values["N41NOL"]}
];

var Colors =  ["#a6cee3", "#1f78b4"]

var margin = {top: 40, right: 2, bottom: 30, left: 180},
    width = 400 - margin.left - margin.right,
    height = 575 - margin.top - margin.bottom,
    barHeight = height / data.length;

// Scale for X axis
var x = d3.scale.linear()
    .domain([0, d3.max(data, function(d){return d.value;})])
    .range([0, width]);

var y = d3.scale.ordinal()
    .domain(["NAICS11", "NAICS21", "NAICS22", "NAICS23", "NAICS31-33", "NAICS41"])
    .rangeRoundBands([0, height]);

//y axis
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .outerTickSize(0);

var svg = d3.select(div).select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .classed("chart", true);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

var bar = svg.selectAll("g.bar")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

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

bar.append("text")
    .attr("class", "text")
    .attr("x", function(d) { return x(d.value) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d.value; })
    .attr("fill", "white")
    .attr("font-family", "sans-serif")
    .attr("font-size", "14px")
    .attr("text-anchor", "end");

 svg.append("text")
  .attr("class", "title")
  .attr("x", width/7)
  .attr("y", 0 - (margin.top / 2))
  .attr("text-anchor", "middle")
  .text("Employment by industry " + "(Total OL: " + feature.properties.IndOLTot + ")");