Javascript 交互式图例onclick或mouseover-D3js

我一直在寻找一种让我的图例控制图表动画的方法（类似于）。但我遇到了一个问题-嵌套选择

var legend = svg.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(70,10)")
    ;

var legendRect = legend.selectAll('rect').data(colors);

legendRect.enter()
   .append("rect")
   .attr("x", w - 65)
   .attr("width", 10)
   .attr("height", 10)
   .attr("y", function(d, i) {
       return i * 20;
   })
   .style("stroke", function(d) {
       return d[1];
   })
   .style("fill", function(d) {
       return d[1];
   });

我正在用一点技巧来制作我的动画。基本上将

样式设置为
显示：无


我希望能够点击矩形并调用函数。但是在legendRect中放置鼠标或鼠标点击不起作用。要设置动画的条不是图例的子项如何调用函数，或将函数链接到图例？

function updateBars(opts) {
var gbars = svg.selectAll("rect.global");
var lbars = svg.selectAll("rect.local");
if (opts === "global") {
    gbars.style("display", "block") ;
    lbars.style("display", "none");
    gbars.transition()
        .duration(500)
        .attr("width", xScale.rangeBand());
};
if (opts === "local") {
    lbars.style("display", "block")
    ;
    gbars.style("display", "none");
    lbars.transition()
        .duration(500)
        .attr("x", 1 / -xScale.rangeBand())
        .attr("width", xScale.rangeBand());
};
}

我的另一个障碍是在单击时更改填充颜色。我希望它几乎模仿一个复选框，因此单击（取消选择）会将填充变成白色。我尝试了类似于
.on（“单击”，“样式”（“填充”，“白色”））
。但这是不正确的

。出于某种原因，该函数没有更新Fiddle上的内容。但它在我的本地主机上工作。不确定这有什么问题。
我不完全确定我是否正确理解您的意思，但是如果您的第一个问题是如何在单击元素Y时更改元素X，那么您需要以下内容：

legendRect.on("click", function() {
  gbars.transition()
    .duration(500)
    .style("display", "block")
    // etc...
}

要更改单击时的填充，请尝试：

gbars.on("click", function() {
  d3.select(this)
    .attr("fill", "white");
}

你能把你到目前为止拥有的东西拿出来一把吗？拿出来一把。尽管出于某种原因它不起作用。但至少在整个代码中有一个峰值。这与我想要做的非常接近。但是我如何处理我的函数正在做的事情呢。您可以看到，如果我正在更改
global
或
local
，则有一个
if
块检查。在您的
legendRect.on（“单击”，函数…
）中，有什么更有效的方法可以做到这一点？我复制了您的所有代码，它似乎工作正常。当然，你可以用很多不同的方法来完成同样的事情，但是如果问题解决了，为什么还要麻烦呢？