D3js连续一个接一个地高亮显示条

D3js highlight bar one by one continuously

本文关键字：一个 显示 高亮 D3js 连续      更新时间：2023-09-26

这是fiddle 的样本

下面的代码是创建条形码

      svg.selectAll("rect")
   .data(dataset, key)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
        return xScale(i);
   })
   .attr("y", function(d) {
        return h - yScale(d.value);
   })
   .attr("width", xScale.rangeBand())
   .attr("height", function(d) {
        return yScale(d.value);
   })
   .attr("fill", function(d) {
        return "blue";
   })
    //Tooltip
    .on("mouseover", function(d) {
        d3.select(this).style("fill","red");
    })
    .on("mouseout", function() {
        d3.select(this).style("fill","blue");
    })  ;

鼠标悬停条变为红色，鼠标悬停条恢复为蓝色，

我希望它一个接一个地连续获得红色，即第一条红色，然后第二条，然后第三条，在向前移动后，前一条应该恢复其原始颜色，一次只有一条红色。当它到达终点时，它应该再次从的起点开始

结果如下：http://jsfiddle.net/DavidGuan/f07wozud/4/

我添加的代码：

function reRenderColor() {
  svg.selectAll("rect")
      .transition()
      .delay(function(d, i){ return i* 500 })
      .duration(200)
      .style('fill', 'red')
      .transition()
      .delay(function(d, i){ return i* 500 + 400 })
      .duration(200)
      .style('fill', 'blue')
}  
reRenderColor();
setInterval(reRenderColor, svg.selectAll("rect").size() * 500 + 500)

为了选择rect元素，我给了它们.attr("id", function(d,i){return "rect"+i;});。然后，我使用递归setTimout函数用d3转换属性来解决这个问题。

 var z = 0;
  var timeoutFunc = function(){ 
  setTimeout(function(){
    if(z < 20){
      d3.select("#rect"+ z).transition().duration(350).attr("fill","red")
                           .transition().delay(550).attr("fill","blue");       
      z++;
      timeoutFunc();
    }else if(z == 20){
        z = 0;
      timeoutFunc();
    }    
  },500);
  };

这是一把最新的小提琴。

请注意，可以更改持续时间以获得更好的颜色可视化效果，但这会给你一个想法。

http://jsfiddle.net/51Lsj6ym/5/

希望这就是您想要的

//Tooltip
.on("mouseover", function(d) {
    d3.selectAll("rect").style("fill","blue");
    d3.select(this).style("fill","red");
})
.on("mouseout", function() {
})  ;

小提琴

相关文章：