如何为D3.js条形图中的条形图指定自定义颜色？

我使用传单JS和D3js在传单弹出窗口中放置条形图

如何为每个种族组栏指定自定义颜色？我想在D3代码中指定自定义颜色，因为我无法修改原始数据集

谢谢

var onEachFeature = function onEachFeature(feature, layer) {

colors = d3.scale.category20()
var div = $('<div id="chart"><h3>Ethnic Group Distribution</h3><svg/><h4>Additional details:</h4>Extra stuff here</div>')[0];

var popup = L.popup({
    minWidth: 500,
    minHeight: 350
}).setContent(div);

layer.bindPopup(popup);

var values = feature.properties;

var data = [{
    name: "Pashtun",
    value: values["Pashtun"]
}, {
    name: "Tajik",
    value: values["Tajik"]
}, {
    name: "Uzbek",
    value: values["Uzbek"]
}, {
    name: "Turkmen",
    value: values["Turkmen"]
}, {
    name: "Hazara",
    value: values["Hazara"]
}, {
    name: "Baloch",
    value: values["Baloch"]
}, {
    name: "Kirghiz",
    value: values["Kirghiz"]
}, {
    name: "Nuristani",
    value: values["Nuristani"]
}, {
    name: "Aimak",
    value: values["Aimak"]
}, {
    name: "Arab",
    value: values["Arab"]
}, {
    name: "Pashaye",
    value: values["Pashaye"]
}, {
    name: "Sadat",
    value: values["Sadat"]
}, {
    name: "Qezelbash",
    value: values["Qezelbash"]
}];

var margin = {
        top: 20,
        right: 90,
        bottom: 80,
        left: 30
    },
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom,
    barWidth = width / data.length;

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function(d) {
        return "";
    })

var y = d3.scale.linear()
    .domain([0, 1])
    .range([height, 0]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5)

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

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

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

bar.append("rect")
    .attr("y", function(d) {
        if (!isNaN(d.value)) {
            return y(d.value);
        } else {
            return 0;
        }
    })
    .attr("width", barWidth - 10)
    .attr("height", function(d) {
        if (!isNaN(d.value)) {
            return height - y(d.value);
        } else {
            return 0;
        }
    })
    .attr("fill",function(d,i){return colors(i)})


bar.append("text")
    .attr("x", function(d) {
        return -height - 70;
    })
    .attr("y", barWidth / 2)
    .attr("transform", "rotate(270)")
    .text(function(d) {
        return d.name;
    });

};

var geojson = L.geoJson(myData, {
    onEachFeature: onEachFeature
}).addTo(map);

---

而不是使用内置的分类颜色

colors = d3.scale.category20()

…你可以尝试使用序数刻度

var colors = d3.scale.ordinal()
    .domain(['Pashtun','Tajik','Uzbek', 'Turkmen', 'Hazara', 'Baloch','Kirghiz','Nuristani','Aimak', 'Arab','Pashaye','Sadat','Qezelbash'])
    .range(['red', 'white', 'green', 'blue', 'yellow', 'pink', 'lime', 'black', 'navy', 'silver', 'skyblue', 'purple', 'olive' ])

…然后修改代码以查找名称：

.attr("fill", function(d, i) { return colors(d.name) })

我没有测试代码，但是如果顺序标尺不起作用，您可以在这里阅读更多关于顺序标尺的内容：

或者，您可以简单地向元素添加一个类

.attr("class", function(d, i) { return 'bar_' + d.name} )

。。。并在CSS中对其进行分类：

.bar_Pashtun { fill: blue }

---

而不是使用内置的分类颜色

colors = d3.scale.category20()

…你可以尝试使用序数刻度

var colors = d3.scale.ordinal()
    .domain(['Pashtun','Tajik','Uzbek', 'Turkmen', 'Hazara', 'Baloch','Kirghiz','Nuristani','Aimak', 'Arab','Pashaye','Sadat','Qezelbash'])
    .range(['red', 'white', 'green', 'blue', 'yellow', 'pink', 'lime', 'black', 'navy', 'silver', 'skyblue', 'purple', 'olive' ])

…然后修改代码以查找名称：

.attr("fill", function(d, i) { return colors(d.name) })

我没有测试代码，但是如果顺序标尺不起作用，您可以在这里阅读更多关于顺序标尺的内容：

或者，您可以简单地向元素添加一个类

.attr("class", function(d, i) { return 'bar_' + d.name} )

。。。并在CSS中对其进行分类：

.bar_Pashtun { fill: blue }

---

我不明白：您不能修改

var数据

？如果可以，它很简单：对于每个对象，在

名称

和

值

之后，只需创建一对

颜色：#某物

，然后创建

.attr（“fill”，函数（d）{return d.color}）。我不明白：您不能修改
var数据
？如果可以，它很简单：对于每个对象，在
名称
和
值
之后，只需创建一对
颜色：#某物
，然后创建
.attr（“fill”，函数（d）{return d.color}）。好主意。非常感谢。我会回来报告的。好主意。非常感谢。我会回来报到的。