Question

我陷入了一个非常小的问题。我需要在单击单选按钮时显示和隐藏饼图标签。我正在使用与Dojo的nvd3饼图。以下是代码段：

if(this._elemPool.data_type.widget[0].checked) {
          this.connectedWidgets.graph.chart.labelType("value");
          this.connectedWidgets.graph.chart.showLabels(false);
        } else {
          this.connectedWidgets.graph.chart.labelType("percent");
          this.connectedWidgets.graph.chart.showLabels(true);
        }

当我选择百分比标签选项时，它首先正常工作，然后当我选择值选项时，它不会隐藏标签，也不会显示值。

任何人都可以帮我解决这个问题。我只需要显示标签，否则不显示标签。

Answer 1

似乎NVD3忘记删除标签。您可以手动删除图表中的所有元素作为变通方法。在更改图表设置后执行以下行：

d3.select("#chart svg").selectAll("*").remove();
chart.update();

演示

var chart;

nv.addGraph(function() {
  chart = nv.models.pieChart()
    .x(function(d) {
      return d.label
    })
    .y(function(d) {
      return d.value
    });

  d3.select("#chart svg")
    .datum(exampleData())
    .transition().duration(350)
    .call(chart);

  return chart;
}, function() {
  switchToPercentageMode();
});

function switchToPercentageMode() {
  chart.labelType("percent")
    .showLabels(true);
  d3.select("#chart svg").selectAll("*").remove();
  chart.update();
}

function switchToValueMode() {
  chart.labelType("value")
    .showLabels(false);
  d3.select("#chart svg").selectAll("*").remove();
  chart.update();
}

$("#percentage").change(function() {
  switchToPercentageMode();
});

$("#value").change(function() {
  switchToValueMode();
});

function exampleData() {
  return [{
    "label": "One",
    "value": 29.765957771107
  }, {
    "label": "Two",
    "value": 0
  }, {
    "label": "Three",
    "value": 32.807804682612
  }, {
    "label": "Four",
    "value": 196.45946739256
  }, {
    "label": "Five",
    "value": 0.19434030906893
  }, {
    "label": "Six",
    "value": 98.079782601442
  }, {
    "label": "Seven",
    "value": 13.925743130903
  }, {
    "label": "Eight",
    "value": 5.1387322875705
  }];
}

#chart {
  height: 500px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="chartMode" value="percentage" id="percentage" checked>
<label for="percentage">Percentage</label>
<input type="radio" name="chartMode" value="value" id="value">
<label for="value">Value</label>

<div id="chart">
  <svg></svg>
</div>

如何以编程方式显示隐藏nvd3饼图标签

1 个答案:

演示