Question

我为点击

触发的转换设置了1500毫秒的持续时间

首次运行时，转换似乎为0 ms持续时间，这不是预期的-_-

带有相应小提琴（http://jsbin.com/pasodopeyati/3/edit）的最小例子：

// create svg element
var svg = d3.select("body").append("svg").attr('width', 200).attr('height', 200);

// add 4 red circles
svg.selectAll('circle').data([{'n': 0}, {'n': 1}, {'n': 2}, {'n': 3}])
  .enter()
  .append('circle')
  .attr({
    cx: function(d, i) { return (i % 2) * 50 + 50;},
    cy: function(d, i) { return Math.floor(i / 2) * 50 + 50;},
    r:10,
    fill: 'red'
  });


// counter
var i = 0;  

// create button and bind on click
d3.select("body").append('button').text('fade').on('click', function () {
  // fade 3 circles alternatively (cf. counter)
  svg.selectAll('circle')
  .transition()
  .duration(2000)
  .attr('opacity', function(d) { return d.n == i ? 1 : 0.1});

  i = (i + 1) % 4;
});

试试吧！您会注意到第一次点击会立即淡化3个圆圈，然后点击它就会按预期持续1500毫秒的过渡。

如何将第一次转换的持续时间设为1500毫秒？

Bonus：为什么我的代码表现如此？

Answer 1

创建圆圈时，您尚未指定任何不透明度，因此转换中没有来自/来自。试试这个：

  .attr({
    cx: function(d, i) { return (i % 2) * 50 + 50;},
    cy: function(d, i) { return Math.floor(i / 2) * 50 + 50;},
    // need this starting value
    opacity: 1
    r:10,
    fill: 'red'
  });

Answer 2

实际上我认为opacity是style参数，而不是svg attribute。所以你也可以改变你的路线：

.attr('opacity', function(d) { return d.n == i ? 1 : 0.1})

到

.style('opacity', function(d) { return d.n == i ? 1 : 0.1})

有相同的结果。

过渡和不透明度不能很好地协同工作

2 个答案: