我有一个使用以下代码创建的D3甜甜圈图:
var svg = d3.select('#chart-cont-2')
.append('svg')
.attr('width', width)
.attr('height', height)
var g = svg.append('g')
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
var chart_g = g.append('g')
.attr('class', 'chart')
var text_g = g.append('g')
.attr('class', 'text')
var color = d3.scaleOrdinal()
.domain(dataset)
.range(['rgba(2, 168, 150, 1)', 'rgba(237, 109, 0, 1)'])
var pie = d3.pie()
.value((d) => d.value)
var arc = d3.arc()
.innerRadius(87)
.outerRadius(77)
chart_g.selectAll('.part')
.data(pie(d3.entries(dataset)))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', (d, i) => color(i))
有时数据集为空。有没有方法可以在没有数据时显示rgba(2,168,150,1)彩色甜甜圈图,然后在有数据时切换到我的编码甜甜圈图?
编辑:我的数据集是一个对象:
{a: 0, b: 0}
当两个值均为0时,我希望以
rgba(2, 168, 150, 1)
的颜色显示甜甜圈图。 最佳答案
是的,您只需要知道数据集不为空。
在将颜色传递给.range
之前,定义一个可能的颜色数组。
例:
var colorsRange = dataset && dataset.length ? ['rgba(2, 168, 150, 1)', 'rgba(237, 109, 0, 1)'] : ['rgba(2, 168, 150, 1)'];
var color = d3.scaleOrdinal()
.domain(dataset)
.range(colorsRange);
关于javascript - 具有3个数据的D3甜甜圈图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59636796/