提示工具上的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/上稍微更新了您的演示，并将过渡时间设置为1000ms，以便于识别动画。 工具提示淡入淡出-适用于我：

并没有太大变化，但是在鼠标悬停时删除了“即时弹出窗口”：

      .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在鼠标悬停时会遇到困难，也许工具提示会覆盖该点，因此不再需要鼠标悬停。 您使用什么浏览器？