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

Question

我正在使用 LeafletJs 和 D3js 将条形图放入 Leaflet 弹出窗口中。

如何为每个族裔群体栏指定自定义颜色？我想在 D3 代码中分配自定义颜色，因为我无法修改原始数据集。 Link

谢谢。

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

数据集测试:

var afghanDistrictsSample = {
"type": "FeatureCollection",
"features": [{
    "type": "Feature",
    "properties": {
        "stroke": "#555555",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "fill": "#555555",
        "fill-opacity": 0.5,
        "Pashtun": 0.43,
        "Tajik": 0.12,
        "Uzbek": 0.05,
        "Turkmen": 0.00,
        "Hazara": 0.00,
        "District": "Argo",
        "Province": "Kandahar"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [61.69921875, 32.08257455954592],
                [61.69921875, 32.879587173066305],
                [62.666015625, 32.879587173066305],
                [62.666015625, 32.08257455954592],
                [61.69921875, 32.08257455954592]
            ]
        ]
    }
}, {
    "type": "Feature",
    "properties": {
        "Pashtun": 0.32,
        "Tajik": 0.20,
        "Uzbek": 0.01,
        "Turkmen": 0.02,
        "Hazara": 0.00,
        "District": "Jurm",
        "Province": "Farah"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [62.75390625, 32.95336814579932],
                [62.75390625, 33.76088200086917],
                [63.69873046874999, 33.76088200086917],
                [63.69873046874999, 32.95336814579932],
                [62.75390625, 32.95336814579932]
            ]
        ]
    }
}, {
    "type": "Feature",
    "properties": {
        "Pashtun": 0.05,
        "Tajik": 0.50,
        "Uzbek": 0.21,
        "Turkmen": 0.00,
        "Hazara": 0.00,
        "District": "Ragh",
        "Province": "Ghor"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [63.74267578125, 33.54139466898275],
                [63.74267578125, 34.43409789359469],
                [65.14892578125, 34.43409789359469],
                [65.14892578125, 33.54139466898275],
                [63.74267578125, 33.54139466898275]
            ]
        ]
    }
}, {
    "type": "Feature",
    "properties": {
        "Pashtun": 0.00,
        "Tajik": 0.01,
        "Uzbek": 0.10,
        "Turkmen": 0.20,
        "Hazara": 0.40,
        "District": "Highan",
        "Province": "Kabul"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [64.53369140625, 35.15584570226544],
                [64.53369140625, 35.94243575255426],
                [65.56640625, 35.94243575255426],
                [65.56640625, 35.15584570226544],
                [64.53369140625, 35.15584570226544]
            ]
        ]
    }
}, {
    "type": "Feature",
    "properties": {
        "Pashtun": 0.00,
        "Tajik": 0.01,
        "Uzbek": 0.20,
        "Turkmen": 0.30,
        "Hazara": 0.04,
        "District": "Nusay",
        "Province": "Kunduz"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [65.58837890625, 33.30298618122413],
                [65.58837890625, 34.32529192442733],
                [66.90673828125, 34.32529192442733],
                [66.90673828125, 33.30298618122413],
                [65.58837890625, 33.30298618122413]
            ]
        ]
    }
}, {
    "type": "Feature",
    "properties": {
        "Pashtun": 0.20,
        "Tajik": 0.00,
        "Uzbek": 0.00,
        "Turkmen": 0.10,
        "Hazara": 0.20,
        "District": "Zebak",
        "Province": "Logar"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [65.98388671875, 34.72355492704219],
                [65.98388671875, 35.53222622770337],
                [66.95068359374999, 35.53222622770337],
                [66.95068359374999, 34.72355492704219],
                [65.98388671875, 34.72355492704219]
            ]
        ]
    }
}, {
    "type": "Feature",
    "properties": {
        "Pashtun": 0.10,
        "Tajik": 0.10,
        "Uzbek": 0.28,
        "Turkmen": 0.10,
        "Hazara": 0.00,
        "District": "Wakhan",
        "Province": "Nimruz"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [67.32421875, 34.43409789359469],
                [67.32421875, 35.42486791930558],
                [68.37890625, 35.42486791930558],
                [68.37890625, 34.43409789359469],
                [67.32421875, 34.43409789359469]
            ]
        ]
    }
}]
};

Answer 1

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

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

我没有测试代码，但如果它不起作用，您可以在此处阅读有关序数比例的更多信息: https://github.com/mbostock/d3/wiki/Ordinal-Scales

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

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

...并在 CSS 中对其进行分类:

.bar_Pashtun { fill: blue }