工具提示鼠标跟踪只在图形数据之外工作

Question

我正在尝试将这个示例中的工具提示技术实现到一个面积图中。

工具提示只会在光标位于图形绘制区域上方时跟踪鼠标，而不像在示例中，只要鼠标在svg窗口中，工具提示就会跟踪鼠标。

我不知道我做错了什么。如有任何帮助，不胜感激。

var tdata = [
{
    "date":"2016-06-28 05:47:10",
    "value": 80
},
{
    "date":"2016-06-28 05:47:20",
    "value": 90
},
{
    "date":"2016-06-28 05:47:30",
    "value": 82
},
{
    "date":"2016-06-28 05:47:40",
    "value": 78
},
{
    "date":"2016-06-28 05:47:15",
    "value": 85
} ,
{
    "date":"2016-06-28 05:47:25",
    "value": 70
} ,
{
    "date":"2016-06-28 05:47:35",
    "value": 95
},
{
    "date":"2016-06-28 05:47:45",
    "value": 88
} , 
];
  
  // d3 code 
  var w = 800;
  var h = 300;
  var firstappend = false;
  var margin = {top: 20, right: 20, bottom: 90, left: 40},
      width = w - margin.left - margin.right,
      height = h - margin.top - margin.bottom;
  var svg = d3.select("#disp").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
   var x = d3.time.scale().range([0, width]);
    var y = d3.scale.linear()
      .domain([0, 100])
      .range([height, 0]);
    var line = d3.svg.line()
      .interpolate("cardinal")
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d) {
        return y(d.value);
      });
    var area = d3.svg.area()
      .interpolate("cardinal")
      .x(line.x())
      .y1(line.y())
      .y0(y(0));
    var xAxis = d3.svg.axis()
        .scale(x)  //xbar
        .orient("bottom")
        .ticks(d3.time.minutes, 4)
        .tickFormat(d3.time.format('%m/%d %M')); 
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left')
        .tickPadding(8);
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(+"+0+"," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-8px")
        .attr("dy", "-4px")
        .attr("transform", "rotate(-90)" );
    svg.append('g')
      .attr('class', 'y axis').attr("transform", "translate(-"+0+"," +0 + ")")
      .call(yAxis);
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
    var lines = svg.selectAll('.property');
    var lE;
/////////////////////////tooltip code:
var focus = svg.append("g") 
    .style("display", "none");
var  bisectDate = d3.bisector(function(d) { return d.date; }).left;
      
    focus.append("circle")
        .attr("class", "y")
        .style("fill", "red")
        .style("stroke", "black")
       // .style('opacity', '0.5')
        .attr("r", 5);
    
   var wind = svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all")
        .on("mouseover", function() { focus.style("display", null); });
      //  .on("mouseout", function() { focus.style("display", "none"); });
        
/////////////////////////////////
function update(dataset){
// parse new date strings
 dataset.forEach(function(d) { 
  if(typeof(d.date) === "string"){ d.date = parseDate(d.date); }
});
// sort by date
dataset = dataset.sort(sortByDateAscending);
// update domain
x.domain(d3.extent(dataset, function (d) { return d.date; }));
svg.selectAll("g.y.axis")
    .call(yAxis);
svg.selectAll("g.x.axis")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-8px")
  .attr("dy", "-4px")
  .attr("transform", "rotate(-90)" );
// do first append once
if(!firstappend){
  init(dataset); 
  firstappend = true;
}
// update new data
lE.select(".tarea").attr("d", function(d) { return area(dataset); });
/////////////////////////tooltip code:
 
wind.on("mousemove", mousemove);
function mousemove() {
          var tset = dataset;
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(tset, x0, 1),
        d0 = tset[i - 1],
        d1 = tset[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus.select("circle.y")
        .attr("transform",
              "translate(" + x(d.date) + "," +
                             y(d.value) + ")");
  }     
   
     
//////////////////////////////////
}
function init(dataset){
lines = svg.selectAll('.property')
      .data(dataset, function(d) {
        return d.property;
      });
lE = lines.enter()
      .append('g')
      .attr('class', 'property');
      lE.append("path")
        .attr("class", "tarea")
        .style('fill', 'red')
        .style('opacity', '0.5')
        .attr("d", function(d) {
          return area(dataset);
        });
}
  function sortByDateAscending(a, b) {
    return Date.parse(a.date) - Date.parse(b.date);
};
update(tdata);  

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="disp"></div> 

Answer 1

我认为图表的区域挡住了我们要鼠标悬停的元素…

允许指针事件通过。tarea将绕过这个问题。

CSS:

.tarea{
  pointer-events: none;
}

工作小提琴:https://jsfiddle.net/z24zy61w/