0

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

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

我正在使用一些技巧来制作动画。基本上设置style为display: none.
我希望能够单击矩形并调用该函数。但是在其中放置鼠标悬停或单击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());
};
}

我的另一个障碍是在 click 上更改填充颜色。我希望它几乎模仿一个复选框，因此单击（取消选择）会将填充变为白色。我尝试了类似的东西.on("click",(".style" ("fill", "white")))。但这是不正确的。

这是我的小提琴。出于某种原因，该功能没有更新 Fiddle 上的内容。它可以在我的本地主机上运行。不确定问题所在。

4

1 回答 1

2

我不完全确定我是否正确理解了您，但是如果您的第一个问题是单击元素 Y 时如何更改元素 X，则需要以下内容：

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

至于更改点击填充，请尝试：

gbars.on("click", function() {
  d3.select(this)
    .attr("fill", "white");
}
于 2013-05-01T01:15:56.323 回答