Условное удаление метки из графического Javascript Piechart

Question

У меня есть следующий код:

window.onload = function(){
  var store = [{ Name:"Item 1", Total:18 },
               { Name:"Item 2", Total:7 },
               { Name:"Item 3", Total:3},
               { Name:"Item 4", Total:12}];
  

  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);

  var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d){ return d.Name; }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true);

    
  new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");
    
     
}

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

У меня вопрос, как я могу сделать так, чтобы круговая диаграмма отображала только метки со значением, большим или равным 10 (т.е. пользовательский лимит)?

Answer 1

Вы можете использовать labelFormatter в вашем случае, чтобы условно скрыть метку.

Используйте код ниже, чтобы скрыть метку ниже 10.

.labelFormatter(
    function(n)
    { 
      return parseInt(n) > 10 ? n.toString() : '';
    }
  );

Примечание. В этом случае тип возвращаемого значения должен быть строкой. Вот почему я использовал.toString().

Вот код

  var store = [{ Name:"Item 1", Total:18 },
               { Name:"Item 2", Total:7 },
               { Name:"Item 3", Total:3},
               { Name:"Item 4", Total:12}];
  

  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);

  var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d){ return d.Name; }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true)
  .labelFormatter(
    function(n)
    { 
      return parseInt(n) > 10 ? n.toString() : '';
    }
  );
    
  new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>