Question

我正在尝试将工具提示技术从this example实施到区域图表中。

当光标位于图形绘制的区域上方时，工具提示将仅跟踪鼠标，与示例中的不同，只要它在svg窗口中，它就会跟踪鼠标。

我无法弄清楚我做错了什么。非常感谢任何帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我认为图表的区域阻挡了我们正在观看鼠标悬停的元素......

允许指针事件通过.tarea将解决这个问题。

CSS：

.tarea{
  pointer-events: none;
}

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

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

1 个答案: