javascript - D3 与 Angular - 半饼图图表颜色序列
问题描述
有人可以帮我了解图表颜色吗?
我在角度使用 d3.js 来创建半饼图。我想要 3 个部分,我应该有 3 种颜色。我想要 3 种颜色,每种颜色都有一定范围。
我的数据为 { a: 50, b: 50, c: 50},颜色为 ['green','yellow','red']。为此,图表被平均分割,图表颜色的顺序正确(以绿色开始,以红色结束)。这是正确的附加图像。
但是当我提供值 { a: 50, b: 30, c: 70} 时,我得到的颜色顺序不同。如下所示,它看起来首先呈现最高值 (70)。
我的代码:
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);
解决方案
您可以指定饼图切片的排序方式:
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'])
推荐阅读
- javascript - 如何在 Nuxtjs 中的组件上获取路由元和所有路由元?
- jquery - JQuery.js 标签放置最佳实践 MVC .net
- firebase - 为什么我的 WillPopScope 只是偶尔在 Flutter 导航中工作是有原因的?
- javascript - 如何在将图像放入 TinyMCE 之前调整其大小?我遇到的问题是 drop 事件不允许覆盖项目
- excel - Excel 中的高级筛选,在 1 列中搜索多个文本条件
- css - 有没有办法匹配css选择器中的几个关键字?
- vue.js - Workbox 未向服务人员添加正确的预缓存清单
- google-ads-api - 广告未获批准,但其政策数据为空白?
- mysql - MYSQL - 查找列中的不同值
- javascript - 使用 FOR 循环遍历 JSON 数据并创建指定属性 ('name') 的列表,无法创建另一个引用 prop 的 SINGLE 元素