Question

嘿伙计我需要一些帮助才能找到一种方法将图像切换集成到淡入淡出功能中。由于某些原因，鼠标悬停在图表上后，和弦不会褪色。

在初始页面加载期间查看加载（但不显示）一系列图像的想法，然后使用淡入淡出功能简单地切换预定义的图像区域以显示不同的图像。

Answer 1

你应该将绑定到弧的数据和它的索引作为参数传递给fade函数返回的函数，如下所示。

d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
    .on('mouseover', function(d,i) {
      fade(0.1)(d,i); //Changed line of code
      overlayPic.classList.remove('hidden');
      overlayPic.src = 'https://farm1.staticflickr.com/697/23125850325_b69a8530dd_n.jpg';
    })
    .on("mouseout", function(d,i){
      fade(1)(d,i);  //Changed line of code
      overlayPic.classList.add('hidden');
    });

淡化功能期望两个参数。

function fade(opacity) {
  return function(g, i) { //Note that this code uses index i
    svg.selectAll(".chord path")
        .filter(function(d) { return d.source.index != i && d.target.index != i; })
        .transition()
        .style("opacity", opacity);
  };
}

D3淡入淡出功能圆形图

1 个答案: