javascript - 工具提示上的 d3 转换不起作用

Question

我有一个多折线图，其中鼠标悬停的每个点都会显示一个工具提示。鼠标移出时，工具提示会消失，并带有一些过渡效果。过渡适用于鼠标悬停但不适用于鼠标移开。这是代码片段

    var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

    to_graph.forEach(function(d) {
          svg.selectAll("dot")
              .data(d.data)
              .enter()
              .append("svg:circle")
              .attr("r", 5)
              .attr("cx", function(v) {
                  return x(v[0]);
              })
              .attr("cy", function(v) {
                  return y(v[1]);
              })
              .attr("stroke", "black")
              .attr("stroke-width", "2")
              .attr("fill", "white")
              .on("mouseover", function(v) {
                  div.transition()
                      .duration(200)
                      .style("opacity", '.9');
                  var text = formatTime(v[0]) + "<br/>" + v[1] + "<br/>" + d.label;
                  div.html(text)
                      .style("left", (d3.event.pageX)+"px")
                      .style("top", (d3.event.pageY-28) + "px")
                      .attr("fill", "steelblue")
                      //.style("opacity", '.9'); <---- NOT USEFUL
              })
              .on("mouseout", function() {
                  console.log(div);       // <----- div is defined
                  div.transition().duration(200)
                      .style("opacity", "0");
                  //d3.select(this)
                    //  .attr("fill", "transparent");
              });
      });

我可能在这里遗漏了一些非常明显的东西。当我在 mouseout 上删除过渡时，它可以工作，但在过渡时它不会。

谢谢!

这是完整的(简化的)图表代码:

// general format
var graph_data = {"data": [y1, y2, ...], "alerts": [null, y2, null, y3...]};

// establish margin and padding

  var margin = {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
  };
  var width = 1000 - margin.left - margin.right;
  var height = 400 - margin.top - margin.bottom;
  var xpadding = 70,
      ypadding = 70;

  // svg to hold the graph
  var svg = d3.select("#"+container)
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // x-axis scale and min-max values
  var x = d3.time.scale()
      .range([xpadding, width-xpadding*2])
      .domain([dateFrom, dateTo]);

        // y-axis scale and min-max values
  var y = d3.scale.linear()
      .range([height-ypadding, ypadding])
      .domain([
          0,
          d3.max(graph_data.data)
      ]);

  // xaxis
  var xaxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  // yaxis
  var yaxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(5);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (height - xpadding) + ")")
      .call(xaxis);

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + ypadding + ",0)")
      .call(yaxis);

// points and tooltips on the chart for mouseover
  var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

  // draw alerts as dots
  var formatTime = d3.time.format("%a %e %B %I %p");
  var plot_data = formatData(graph_data.alerts, dateFrom);
  // filter out null values in alerts
  plot_data = plot_data.filter(function (d) {
      return d[1] !== null;
  });
  svg.selectAll("dot")
      .data(plot_data)
      .enter()
      .append("svg:circle")
      .attr("r", 5)
      .attr("cx", function(v) {
          return x(v[0]);
      })
      .attr("cy", function(v) {
          return y(v[1]);
      })
      .attr("stroke", "black")
      .attr("stroke-width", "2")
      .attr("fill", "red")
      .on("mouseover", function(v) {
          div.transition()
              .duration(200)
              .style("opacity", 0.9);
          var text = "Alert<br/>"+ formatTime(v[0]) + "<br/>" + v[1];
          div.html(text)
              .style("left", (d3.event.pageX)+"px")
              .style("top", (d3.event.pageY-28) + "px")
              .attr("fill", "steelblue")
              .style("opacity", 0.9);
      })
      .on("mouseout", function() {
          console.log(div);
          div.transition().duration(200)
              .style("opacity", 0);
      })

Answer 1

我在 http://jsfiddle.net/Xh2vj/1/ 稍微更新了您的演示并将过渡时间设置为 1000 毫秒，以便更容易识别动画。工具提示淡入淡出 - 它对我有用:

没有太大变化，但删除了鼠标悬停时的“即时弹出”:

      .on("mouseover", function(v) {
             div.transition()
                  .duration(1000) //longer to easier be seen
                  .style("opacity", 0.9); //this is for the tooltip
              var text = "Alert<br/>"+ formatTime(v[0]) + "<br/>" + v[1];
              div.html(text)
                  .style("left", (d3.event.pageX)+"px")
                  .style("top", (d3.event.pageY-28) + "px")
                  .attr("fill", "steelblue");
                 // .style("opacity", 0.9); // not here
          })

在 Chrome 35、Safari 7 和 Firefox 29 等最新桌面浏览器上进行了测试。较旧的 Opera 12 在鼠标悬停时遇到困难，工具提示可能会覆盖该点，因此鼠标悬停不再有效。你用什么浏览器？