javascript - D3淡入淡出功能圆图

Question

嘿，大家好，我需要一些帮助来找到一种将图像切换集成到淡入淡出功能中的方法。由于某种原因，鼠标悬停在图表上后和弦不会消失。

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

This is my JS Bin

Answer 1

您应该将绑定(bind)到弧的数据及其索引作为参数传递给由淡入淡出函数返回的函数，如下所示。

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);
  };
}