Question

使用d3.js，我创建了一个条形图，当您单击其中一个条形时，条形图将转换为并且也可以转换为条形图。然而，我想要发生的是将所有条形转换出来，除了我点击的那个。

我的过渡是通过以下方式完成的：

bars
    .attr('height', 0)
    .attr('y', height)
    .style('fill-opacity', 1)
    .transition()
    .attr('height', function(d) {
      return y(d);
    })
    .attr('y', function(d) {
      return height - y(d);
    })
    .delay(function(d, i) {
      return i * delay;
    })
    .duration(duration)
    .ease(easing);

我的转换是使用

指定的

bars
  .transition()
  .attr('height', 0)
  .attr('y', height)
  .duration(300)
  .delay(function(d, i) {
    return i * delay;
  });

如何修改此项以转换掉除了点击的栏之外的所有其他栏？

Answer 1

您可以使用selection.filter()过滤掉一个接收点击事件并随后转换所有其他事件的栏。

bars.on("click", function() {
  var clicked = this;   // Remember which bar received the click

  bars
    .filter(function() {
      return this != clicked;  // Use a filter to select all other bars for the transition.
    })
    .transition()
    .attr('height', 0)
    .attr('y', height)
    .duration(300)
    .delay(function(d, i) {
      return i * delay;
    });
});

鉴于您提供的稀疏代码段，这应该在任何情况下都可以使用，尽管可能有更优雅或更有效的方法来实现相同的功能。作为meetamit的pointed out，一种方法可能涉及使用绑定到元素的数据。但是，任何更复杂的解决方案都需要在代码的其余部分和数据结构中获得更多见解。

D3.js - 删除除一个之外的其他栏

1 个答案: