NVD3 -添加额外的功能,传奇点击不覆盖现有的

NVD3 - Adding extra functionality to legend click without overriding existing

本文关键字:覆盖 传奇 添加 功能 NVD3      更新时间:2023-09-26

我有一个NVD3甜甜圈图,我需要一个新的功能,而一个传奇被点击添加到显示/隐藏系列功能。任何人都可以帮助实现这一目标。然而,我已经实现了下面演示中解释的附加功能。但是默认的传奇点击功能消失了。请帮帮我……谢谢。

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>

替换,

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);
            })

工作. .谢谢高积云。