NVD3 -在不覆盖现有功能的情况下向图例单击添加额外功能

Question

我有一个NVD3圆环图，在单击图例时需要一个新功能，并将其添加到显示/隐藏系列功能中。有没有人能帮我实现这一点。然而，我已经实现了下面演示中解释的附加功能。但是默认的Legend Click功能消失了。请帮帮我..谢谢。

​

nv.addGraph(function() {
  var donutChart = nv.models.pieChart()
  		.x(function(d) {
        return d.label
      })
  		.y(function(d) {
        return d.value
      })
  		.showLabels(true)
  		.showLegend(true)
  		.labelThreshold(.05)
  		.labelType("key")
  		.color(["#965251", "#00b3ca", "#7dd0b6", "#e38690", "#ead98b"])
  		
  		.donut(true)
  		.donutRatio(0.35);
  
  	// Insert text into the center of the donut
  	function centerText() {
			return function() {
        var svg = d3.select("svg");

    		var donut = svg.selectAll("g.nv-slice").filter(
          function (d, i) {
            return i == 0;
          }
        );
        
        // Insert first line of text into middle of donut pie chart
        donut.insert("text", "g")
            .text("Line One")
            .attr("class", "middle")
            .attr("text-anchor", "middle")
        		.attr("dy", "-.55em")
        		.style("fill", "#000");
        // Insert second line of text into middle of donut pie chart
        donut.insert("text", "g")
            .text("Line Two")
            .attr("class", "middle")
            .attr("text-anchor", "middle")
        		.attr("dy", ".85em")
        		.style("fill", "#000");
      }
    }
  
  // Put the donut pie chart together
  d3.select("#donut-chart svg")
    .datum(seedData())
    .transition().duration(300)
    .call(donutChart)
    .call(centerText());
    //.call(pieSlice());
    d3.select("g.nv-legendWrap").selectAll("g.nv-series")
                .on("click", function (d) {
                    console.log("One needs to be handled " + d.label);
                    
                })
  return donutChart;
});


// Seed data to populate donut pie chart
function seedData() {
  return [
    {
      "label": "One",
      "value": 25
    },
    {
      "label": "Two",
      "value": 25
    },
    {
      "label": "Three",
      "value": 25
    },
    {
      "label": "Four",
      "value": 25
    },
    {
      "label": "Five",
      "value": 25
    }
  ];
}

html, body, #donut-chart, .content{height:100%;width:100%;}
.content h1 {
  font-weight: 300;
  text-align: center;
}

svg {
  width: 500px;
  height: 500px;
  margin: 0 auto;

   text.middle {
    font-family: Lato;
    font-weight: 300;
    font-size: 24px;
  }
  
  .nvd3.nv-pie .nv-pieLabels text {
    font-family: Lato;
    font-size: 18px;
    font-weight: 300;
    fill: #fff !important;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>

<div class="content">
  <h1>NVD3 Donut Pie Chart</h1>
  
  <div id="donut-chart">
    <svg></svg>
  </div>
</div>

​

Answer 1

替换，

d3.select("g.nv-legendWrap").selectAll("g.nv-series")
            .on("click", function (d) {
                console.log("One needs to be handled " + d.label);

            })

使用

d3.select("g.nv-legendWrap").selectAll("g.nv-series")
            .on("click.namespace", function (d) {
                console.log("One needs to be handled " + d.label);

            })

起作用了。感谢积云。