Question

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

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内放置鼠标悬停或onclick不起作用。动画的条形图不是图例的子图形。 如何调用该函数，或将我的函数链接到我的图例？

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("click",(".style" ("fill", "white")))类似的东西。但这是不正确的。

Here is my fiddle 即可。由于某种原因，该功能不是在Fiddle上更新的东西。它虽然适用于我的localhost。不确定那个问题。

Answer 1

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

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

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

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

交互式图例onclick或鼠标悬停 - D3js

1 个答案: