無法將工具提示添加到d3 v4中的可縮放散點圖

我想向scatterplot添加工具提示，這裏是我的代碼，一切正常，但不是工具提示（雙擊縮放）。我需要一個顯示x標籤和y標籤位置的工具提示。我不能想辦法做到這一點，但因爲工具提示似乎不會生成，所以您必須使用縮放。無法將工具提示添加到d3 v4中的可縮放散點圖

<!DOCTYPE html> 
<meta charset="utf-8"> 
<head> 
    <style> 
     body { 
      font-family: "Helvetica Neue", Helvetica, sans-serif; 
      font-size: 14px; 
     } 
     #tooltip { 
      background-color: rgba(187,187,187, 0.7); 
      border-radius: 5px; 
      height: 18px; 
      opacity: 0; 
      pointer-events: none; 
      position: absolute; 
      text-align: center; 
     }  
    </style> 
</head> 
<body> 

    <script src="//d3js.org/d3.v4.min.js"></script> 
    <script> 

     // Create data 
     function randomData(samples) { 
      var data = [], 
       random = d3.randomNormal(); 

      for (i = 0; i < samples; i++) { 
       data.push({ 
        x: random(), 
        y: random() 
       }); 
      } 
      return data; 
     } 
     var tooltip = d3.select('body').append('div') 
         .attr('id', 'tooltip'); 
     var data = randomData(300); 

     var margin = { top: 20, right: 20, bottom: 30, left: 30 }; 
     width = 900 - margin.left - margin.right, 
     height = 480 - margin.top - margin.bottom; 

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

     var x = d3.scaleLinear()   
       .range([0, width]) 
       .nice(); 

     var y = d3.scaleLinear() 
      .range([height, 0]); 

     var xAxis = d3.axisBottom(x).ticks(12), 
      yAxis = d3.axisLeft(y).ticks(12 * height/width); 

     var brush = d3.brush().extent([[0, 0], [width, height]]).on("end", brushended), 
      idleTimeout, 
      idleDelay = 350; 

     var svg = d3.select("body").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 clip = svg.append("defs").append("svg:clipPath") 
      .attr("id", "clip") 
      .append("svg:rect") 
      .attr("width", width) 
      .attr("height", height) 
      .attr("x", 0) 
      .attr("y", 0); 

     var xExtent = d3.extent(data, function (d) { return d.x; }); 
     var yExtent = d3.extent(data, function (d) { return d.y; }); 
     x.domain(d3.extent(data, function (d) { return d.x; })).nice(); 
     y.domain(d3.extent(data, function (d) { return d.y; })).nice(); 

     var scatter = svg.append("g") 
      .attr("id", "scatterplot") 
      .attr("clip-path", "url(#clip)"); 

     scatter.selectAll(".dot") 
      .data(data) 
      .enter().append("circle") 
      .attr("class", "dot") 
      .attr("r", 4) 
      .attr("cx", function (d) { return x(d.x); }) 
      .attr("cy", function (d) { return y(d.y); }) 
      .attr("opacity", 0.5) 
      .style("fill", "#4292c6") 
      .on('mouseover', d => { 
       tooltip.transition() 
        .duration(100)   
        .style('opacity', .9); 
       tooltip.text(`text here`) 
        .style('left', `${d3.event.pageX + 2}px`) 
        .style('top', `${d3.event.pageY - 18}px`); 
       }) 
       .on('mouseout',() => {  
       tooltip.transition()   
       .duration(400)  
       .style('opacity', 0); 
       }); 

     // x axis 
     svg.append("g") 
      .attr("class", "x axis") 
      .attr('id', "axis--x") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("text") 
     .style("text-anchor", "end") 
      .attr("x", width) 
      .attr("y", height - 8) 
     .text("X Label"); 

     // y axis 
     svg.append("g") 
      .attr("class", "y axis") 
      .attr('id', "axis--y") 
      .call(yAxis); 

     svg.append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", "1em") 
      .style("text-anchor", "end") 
      .text("Y Label"); 

     scatter.append("g") 
      .attr("class", "brush") 
      .call(brush); 

     function brushended() { 

      var s = d3.event.selection; 
      if (!s) { 
       if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay); 
       x.domain(d3.extent(data, function (d) { return d.x; })).nice(); 
       y.domain(d3.extent(data, function (d) { return d.y; })).nice(); 
      } else { 

       x.domain([s[0][0], s[1][0]].map(x.invert, x)); 
       y.domain([s[1][1], s[0][1]].map(y.invert, y)); 
       scatter.select(".brush").call(brush.move, null); 
      } 
      zoom(); 
     } 

     function idled() { 
      idleTimeout = null; 
     } 

     function zoom() { 

      var t = scatter.transition().duration(750); 
      svg.select("#axis--x").transition(t).call(xAxis); 
      svg.select("#axis--y").transition(t).call(yAxis); 
      scatter.selectAll("circle").transition(t) 
      .attr("cx", function (d) { return x(d.x); }) 
      .attr("cy", function (d) { return y(d.y); }); 
     } 

    </script> 
</body>

的jsfiddle：https://jsfiddle.net/mw8v3phd/

來源

2017-08-22 Durga Gaddam

您將要覆蓋tooltip變量，再次爲其分配：

var tooltip = d3.select('body').append('div') 
    .attr('id', 'tooltip'); 

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

只保留一個tooltip變量，一個在CSS樣式：

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

編輯：爲了您的工具提示工作，改變你的小組的順序。這是更新的小提琴：https://jsfiddle.net/gerardofurtado/5ja2ssa1/

來源

2017-08-23 01:38:56

它不起作用，我發現了一個有趣的http://wrobstory.github.io/2013/11/D3-brush-and-tooltip.html。它有工具提示縮放，但在V3。他用d3.helper –

你的意思是*「它不工作」*？它**可以**工作。這正是你的代碼，將鼠標懸停在圓圈上：https://jsfiddle.net/gerardofurtado/93jc1544/ –

請介意在Jsfiddle中編輯我的代碼。我可能會做一些錯誤的事情。 –

無法將工具提示添加到d3 v4中的可縮放散點圖

回答

相關問題