为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

神不在的星期二 2022-11-11 15:02:15
我正在尝试根据虚拟数据的 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();}
查看完整描述

1 回答

?
慕婉清6462132

TA贡献1804条经验 获得超2个赞

您需要将数据值传递给您的colorArray函数并使用fill:


chart.attr("fill", (data) => colorArray(data.id));

使用您的代码的工作示例:


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

];


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

    // *********** Apply colors below ***********

    .attr("fill", (data) => colorArray(data.id));

      

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

}


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>



查看完整回答
反对 回复 2022-11-11
  • 1 回答
  • 0 关注
  • 64 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信