d3.js饼图图例切片切换

我正在研究d3.js饼图应用程序。我正在尝试开发一种功能，当您单击图例矩形时，它会切换开/关切片以及图例矩形内的填充。d3.js饼图图例切片切换

传说

Rects 
         .enter() 
         .append("rect") 
         .attr("x", w - 65) 
         .attr("y", function(d, i){ return i * 20;}) 
         .attr("width", 10) 
         .attr("height", 10) 
         .style("fill", function(d, i) { 
          return methods.color(i); 
         })       
         .style("stroke", function(d, i) { 
          return methods.color(i); 
         }) 
         .on('click', function(d, i){ 
          onLegendClick(d, i); 
         })

来源

2014-09-29 The Old County

'onLegendClick（）'在做什么？换句话说，你有什么尝试？ – jshanley 2014-09-29 15:42:49

我已经创建了该函数作为起点。 – 2014-09-29 16:38:17

你是什么意思“切换开关”？你的意思是当你点击图例中的一种颜色时，饼图上的其他颜色变得不透明，而选定的颜色保持亮度？像一个突出的效果？ – aponysus 2014-09-29 18:19:18

这里是来解决问题的一种方法：在你的代码中使用key functions需要被

一个变化，使得d过滤的数据匹配到相应的DOM节点。标签似乎是您的数据集中的一个合适的关键。

只需使用：的

.data(this.piedata, function(d) { return d.data.label});

代替

.data(this.piedata);

然后，在你OnLegendClick功能，要选择所有传奇的正确，而且所有的SVG弧线与点击的元素匹配。

工作流程是：

选择DOM元素
匹配与选择的数据
应用更改

这里是如何做到这一点：

function onLegendClick(dt){ 
    d3.selectAll('rect').data([dt], function(d) { return d.data.label}).style("opacity", function(d) {return Math.abs(1-d3.select(this).style("opacity"))}) 
    d3.selectAll('.pie').data([dt], function(d) { return d.data.label}).style("opacity", function(d) {return Math.abs(1-d3.select(this).style("opacity"))}) 
}

我让你调整“切换”f eature。除了弧线之外，您还可能想要更改文字，为此可以使用其他选择。

更新了jsfiddle：http://jsfiddle.net/Qh9X5/3138/

来源

2014-09-30 09:38:05

这与我正在寻找的东西很接近 - 它更多的是关闭其他切片之间的间隙并使填充变透明的情况。 http://nvd3.org/examples/pie.html – 2014-09-30 09:40:15

我试图切换填充的rects - 但它没有按照计划工作，似乎一旦填充是没有的 - 它不会再被点击再次点击 - http://jsfiddle.net/Qh9X5/3139/ – 2014-09-30 10:26:00

关于你的第二个评论，你应该将填充不透明度转换为0，而不是将填充设置为“无”。这样你的矩形将保持点击。 – 2014-09-30 13:04:03

d3.js饼图图例切片切换

回答

相关问题