dc.js, предотвратите перекрытие внешней метки круговой диаграммы - PullRequest
Новая
       26

dc.js, предотвратите перекрытие внешней метки круговой диаграммы

1 голос
/ 25 апреля 2019

Я не могу правильно отображать метки в тех случаях, когда значения групп очень близки, поэтому метки имеют тенденцию перекрываться.Я пробовал minAngleForLabel.Что еще можно сделать здесь?Код для круговой диаграммы: 

  var types = xf.dimension(function(d) { return d.txntype; });
  var typesSum = types.group().reduceSum(function(d) { return d.txnamount; });
  var pieChart = dc.pieChart("#pie-row-chart",groupname)
      .width(370)
      .height(309)
      .slicesCap(4)
      .innerRadius(70)
      .colors(d3.scaleOrdinal(d3.schemeSet1))
      .drawPaths(true)
      .externalRadiusPadding(60)
      .minAngleForLabel(5)
      .externalLabels(40)
      .dimension(types)
      .group(typesSum)
      .title(function(d) {
          return d.key + ': ' +  Math.round((d.value * 100)/100) + ' BDT';
      })
      .on('pretransition', function(pieChart) {
          pieChart.selectAll('text.pie-slice').text(function(d) {
              return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
          })
      });

image image

1 Ответ

1 голос
/ 05 мая 2019

Я подозреваю, что происходит, когда диаграмма устанавливает метку на пустую строку, когда нет данных, а затем вы устанавливаете ее обратно в свой обработчик pretransition.

Диаграмма имеет 

function sliceTooSmall (d) {
    var angle = (d.endAngle - d.startAngle);
    return isNaN(angle) || angle < _minAngleForLabel;
}

источник 

    labels
        .text(function (d) {
            var data = d.data;
            if ((sliceHasNoData(data) || sliceTooSmall(d)) && !isSelectedSlice(d)) {
                return '';
            }
            return _chart.label()(d.data);
    });

источник

В обработчике pretransition вы можете определить, решил ли диаграмма не отображать текст, с помощью d3.select(this).text(): 

  .on('pretransition', function(pieChart) {
      pieChart.selectAll('text.pie-slice').text(function(d) {
          return d3.select(this).text() && (d.data.key + ' ' + 
            dc.utils.printSingleValue((d.endAngle - d.startAngle) /
            (2*Math.PI) * 100) + '%');
      })
  });

Как только вы это сделаете, вы, вероятно, захотите установить minAngleForLabel немного ниже, так как он указан в радианах.

...