NVD3 -添加额外的功能,传奇点击不覆盖现有的
NVD3 - Adding extra functionality to legend click without overriding existing
我有一个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);
})
工作. .谢谢高积云。
相关文章:
- 在循环中分配json值时,值被覆盖
- 谷歌地图固定位置覆盖
- 只覆盖箭头键滚动事件
- JQuery覆盖不更改单选选项
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- 将添加一个相同类型的事件附加或覆盖以前添加的具有相同名称的事件
- 传单中如何在更改基层时启用/禁用覆盖层
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- HTML/CSS-用于拖放的全页面覆盖
- 让javascript知道epub3电子书中何时播放媒体覆盖
- 覆盖函数中的函数
- 无法覆盖CSS伪元素:before
- 如何覆盖原型中的事件侦听器
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 如何覆盖主干中的extend方法
- jQuery无法处理覆盖
- qoxdoo的代码覆盖工具
- 像createComment这样的各种自定义变量名在内联javascript中被覆盖,但在外部js中没有.为什么?
- javascript函数将数据添加到屏幕,但随后被另一个函数覆盖
- NVD3 -添加额外的功能,传奇点击不覆盖现有的