D3 与 Angular - 半饼图图表颜色序列答案

【问题标题】：D3 with Angular - Half Pie chart Chart colors sequenceD3 与 Angular - 半饼图图表颜色序列
【发布时间】：2021-10-09 17:27:56
【问题描述】：

有人可以帮我解决图表颜色的问题吗？

我在 Angular 中使用 d3.js 来创建半饼图。我想要 3 个部分，我应该有 3 种颜色。我想要 3 种颜色，每种颜色都有一定的范围。

我的数据为 { a: 50, b: 50, c: 50}，颜色为 ['green','yellow','red']。为此，图表被平均分割，图表颜色的顺序正确（以绿色开始，以红色结束）。这是正确的附加图像。

Correct Chart

但是当我提供 { a: 50, b: 30, c: 70} 的值时，我得到的颜色顺序不同。如下所示，它看起来首先呈现了最高值 (70)。

Incorrect Chart

我的代码：

 private theData = { a: 50, b: 30, c: 70};
 private svg:any;    
 private svgWidth = 200;
 private svgHeight = 125;  
 private colorRanges:any;
 private pie:any;
     
this.svg = d3
              .select('div#pie')
              .append('svg')
              .attr('width',this.svgWidth)
              .attr('height',this.svgHeight)
              .attr('id','pie-svg') 
              .append('g')
              .attr('class','ps')
              .attr(
                'transform',                
                'translate('+this.svgWidth/2+',115)');
      
  this.colorRanges = d3.scaleOrdinal().range(['green','yellow','red']); 

 this.pie = d3
.pie()
.startAngle(-90 * (Math.PI / 180))
.endAngle(90 * (Math.PI / 180))
.value((d: any) => d[1]);

this.svg.selectAll('rect')  
.data(this.pie(Object.entries(this.theData)))
.join('path')
.attr('d',
d3.arc().innerRadius(75).outerRadius(35))
.attr('fill', (d:any) => this.colorRanges(d.data[0]))
.attr('stroke','none')
.style('stroke-width','1px')
.style('opacity',1);

【问题讨论】：

标签： javascript angular typescript d3.js angular12

【解决方案1】：

您可以指定饼图的切片应如何sorted：

d3.pie()
    .startAngle(-90 * (Math.PI / 180))
    .endAngle(90 * (Math.PI / 180))
    .value(d => d[1])
    .sort((a, b) => d3.ascending(a[0], b[0]))

这会将“a”的切片放在首位，然后是“b”，然后是“c”。

另外，我建议为您的色标设置一个域，这样您就不会依赖Object.entries() 返回的顺序：

d3.scaleOrdinal()
    .domain(['a', 'b', 'c'])
    .range(['green','yellow','red'])

【讨论】：

谢谢丹。当我将您的代码更改为“.sort((a:any, b:any) => d3.ascending(a[0], b[0]))”时，它对我有用。它期望为 a 和 b 分配数据类型。我添加了任何。