Пончик D3 с 0 данными - PullRequest
Новая
       24

Пончик D3 с 0 данными

0 голосов
/ 08 января 2020

У меня есть кольцевая диаграмма 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).

1 Ответ

1 голос
/ 08 января 2020

Да, вам просто нужно знать, что набор данных не пустой. Определите массив возможных цветов, прежде чем передать его в .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);
...