[英]D3 Donut Chart with 0 Data
我有一個用以下代碼創建的 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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.