如何为d3.js中条形图中的每个条形分配不同的颜色

Question

我正在尝试根据虚拟数据的 id 为条形图中的三个条形分配不同的颜色。但是由于某种原因我失败了，即使我创建了 colorArray 试图将其作为属性并附加到图表中。它应该相对容易，但不确定出了什么问题。请帮我！

const DUMMY_DATA = [

  { id: 'd1', level: 'High Happiness', value: 6.67 },

  { id: 'd2', level: 'Middle Happiness', value: 5.47 },

  { id: 'd3', level: 'Low Happiness', value: 4.35 },

  //{ id: 'd4', level: 'Germany', value: 6 },

];

const MARGINS = {top: 20, bottom: 10};

const CHART_WIDTH = 600; 

const CHART_HEIGHT = 400 - MARGINS.bottom - MARGINS.top; 

let selectedData = DUMMY_DATA;

const x = d3.scaleBand().rangeRound([0,CHART_WIDTH]).padding(0.1); 

const y = d3.scaleLinear().range([CHART_HEIGHT, 0]);

const colorArray = d3.scaleOrdinal().domain(["d1","d2","d3"]).range(["orange", "purple", "steelblue"]);

const chartContainer = d3.select("svg")

    .attr("width", CHART_WIDTH)

    .attr("height", CHART_HEIGHT + MARGINS.bottom + MARGINS.top);

    x.domain(DUMMY_DATA.map((d) => d.level));

    y.domain([0, d3.max(DUMMY_DATA, (d) => d.value) + 3] );

const chart = chartContainer.append("g");

chart.append("g")

    .call(d3.axisBottom(x).tickSizeOuter(0))

    .attr("transform", `translate(0, ${CHART_HEIGHT+10})`)

    .attr("color", "lighgray");

    

function renderChart(){

    chart

    .selectAll(".bar")

    .data(selectedData, data => data.id)

    .enter()

    .append("rect")

    .classed("bar", true)

    .attr("width", x.bandwidth())

    .attr("height", (data) => CHART_HEIGHT - y(data.value))

    .attr("x", (data) => x(data.level))

    .attr("y", (data) => y(data.value));

      

    chart.selectAll(".bar").data(selectedData, data => data.id).exit().remove();

    

    chart

    .selectAll(".label")

    .data(selectedData, data => data.id)

    .enter()

    .append("text")

    .text(data => data.value)

    .attr("x", data => x(data.level) + x.bandwidth()/2)

    .attr("y", data => y(data.value) - 20)

    .attr("text-anchor", "middle")

    .classed("label", true);

    

    chart.selectAll(".label").data(selectedData, data => data.id).exit().remove();

}

Answer 1

您需要将数据值传递给您的colorArray函数并使用fill：chart.attr("fill", (data) => colorArray(data.id));使用您的代码的工作示例：const DUMMY_DATA = [&nbsp; { id: 'd1', level: 'High Happiness', value: 6.67 },&nbsp; { id: 'd2', level: 'Middle Happiness', value: 5.47 },&nbsp; { id: 'd3', level: 'Low Happiness', value: 4.35 },];const MARGINS = {top: 20, bottom: 10};const CHART_WIDTH = 600;&nbsp;const CHART_HEIGHT = 400 - MARGINS.bottom - MARGINS.top;&nbsp;let selectedData = DUMMY_DATA;const x = d3.scaleBand().rangeRound([0,CHART_WIDTH]).padding(0.1);&nbsp;const y = d3.scaleLinear().range([CHART_HEIGHT, 0]);const colorArray = d3.scaleOrdinal().domain(["d1","d2","d3"]).range(["orange", "purple", "steelblue"]);const chartContainer = d3.select("svg")&nbsp; &nbsp; .attr("width", CHART_WIDTH)&nbsp; &nbsp; .attr("height", CHART_HEIGHT + MARGINS.bottom + MARGINS.top);&nbsp; &nbsp; x.domain(DUMMY_DATA.map((d) => d.level));&nbsp; &nbsp; y.domain([0, d3.max(DUMMY_DATA, (d) => d.value) + 3] );const chart = chartContainer.append("g");chart.append("g")&nbsp; &nbsp; .call(d3.axisBottom(x).tickSizeOuter(0))&nbsp; &nbsp; .attr("transform", `translate(0, ${CHART_HEIGHT+10})`)&nbsp; &nbsp; .attr("color", "lighgray");&nbsp; &nbsp;&nbsp;function renderChart(){&nbsp; &nbsp; chart&nbsp; &nbsp; .selectAll(".bar")&nbsp; &nbsp; .data(selectedData, data => data.id)&nbsp; &nbsp; .enter()&nbsp; &nbsp; .append("rect")&nbsp; &nbsp; .classed("bar", true)&nbsp; &nbsp; .attr("width", x.bandwidth())&nbsp; &nbsp; .attr("height", (data) => CHART_HEIGHT - y(data.value))&nbsp; &nbsp; .attr("x", (data) => x(data.level))&nbsp; &nbsp; .attr("y", (data) => y(data.value))&nbsp; &nbsp; // *********** Apply colors below ***********&nbsp; &nbsp; .attr("fill", (data) => colorArray(data.id));&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; chart.selectAll(".bar").data(selectedData, data => data.id).exit().remove();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; chart&nbsp; &nbsp; .selectAll(".label")&nbsp; &nbsp; .data(selectedData, data => data.id)&nbsp; &nbsp; .enter()&nbsp; &nbsp; .append("text")&nbsp; &nbsp; .text(data => data.value)&nbsp; &nbsp; .attr("x", data => x(data.level) + x.bandwidth()/2)&nbsp; &nbsp; .attr("y", data => y(data.value) - 20)&nbsp; &nbsp; .attr("text-anchor", "middle")&nbsp; &nbsp; .classed("label", true)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; chart.selectAll(".label").data(selectedData, data => data.id).exit().remove();}renderChart();let unselectedIds = [];const listItems =d3.select("#data").select("ul").selectAll("li").data(DUMMY_DATA).enter().append("li");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><svg></svg>