d3js - 添加類似工具提示的語音氣泡？

我想添加我認爲是基本的工具提示到d3js中的散點圖，並想知道最簡單的方法去實現它。現在，當您將鼠標懸停在圓上時，x和y座標將顯示在文本中。我希望這些出現在點附近的講話泡泡中。像this。講話泡泡不必看起來像那樣，但我希望它靠近點並指向相關的圓圈。d3js - 添加類似工具提示的語音氣泡？

這裏的主要代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>D3: Adjusted radii</title> 
     <script type="text/javascript" src="../d3/d3.v3.js"></script> 
     <style type="text/css"> 
      /* No style rules here yet */  
     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 

      //Width and height 
      var w = 500; 
      var h = 100; 
      var padding = 20; 

      var dataset = [ 
          [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], 
          [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] 
          ]; 

      //Create scale functions 
      var xScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
           .range([padding, w - padding * 2]); 

      var yScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
           .range([h - padding, padding]); 

      var rScale = d3.scale.linear() 
           .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
           .range([2, 5]); 

      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      svg.selectAll("circle") 
       .data(dataset) 
       .enter() 
       .append("circle") 
       .attr("cx", function(d) { 
        return xScale(d[0]); 
       }) 
       .attr("cy", function(d) { 
        return yScale(d[1]); 
       }) 
       .attr("r", function(d) { 
        return rScale(d[1]); 
       }); 

      // svg.selectAll("text") 
      // .data(dataset) 
      // .enter() 
      // .append("text") 
      // .text(function(d) { 
      //   return d[0] + "," + d[1]; 
      // }) 
      // .attr("x", function(d) { 
      //   return xScale(d[0]); 
      // }) 
      // .attr("y", function(d) { 
      //   return yScale(d[1]); 
      // }) 
      // .attr("font-family", "sans-serif") 
      // .attr("font-size", "11px") 
      // .attr("fill", "red"); 
      svg.selectAll("circle").on("mouseover", function(d) { 
       //Get this bar's x/y values, then augment for the tooltip 
       var xPosition = parseFloat(d3.select(this).attr("cx")) ; 
       var yPosition = parseFloat(d3.select(this).attr("cy")) ; 

       //Create the tooltip label 
       svg.append("text") 
        .attr("id", "tooltip") 
        .attr("x", .2*w) 
        .attr("y", .2*h) 
        .attr("text-anchor", "middle") 
        .attr("font-family", "sans-serif") 
        .attr("font-size", "11px") 
        .attr("font-weight", "bold") 
        .attr("fill", "black") 
        .text("x = "+d3.round(xPosition,2)+",y = "+d3.round(yPosition,2)); 

      svg.selectAll("circle").on("mouseout", function(d) { 
       //Remove the tooltip 
       d3.select("#tooltip").remove(); 

      }) 
      }) 
     </script> 
    </body> 
</html>

謝謝！

來源

2016-01-15 garson

一個非常好的開始是看D3 Tip。

如果你想推出自己的然後隨意，你可以使用它作爲一個指南。如果您在使用D3提示很高興那麼它的下面（從Github上現場拍攝）一樣簡單：

/* Initialize tooltip */ 
tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; }); 

/* Invoke the tip in the context of your visualization */ 
vis.call(tip) 

vis.selectAll('rect') 
    .data(data) 
.enter().append('rect') 
    .attr('width', function() { return x.rangeBand() }) 
    .attr('height', function(d) { return h - y(d) }) 
    .attr('y', function(d) { return y(d) }) 
    .attr('x', function(d, i) { return x(i) }) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide)

來源

2016-01-15 19:59:15 Ian

而不僅僅是創建一個文本元素，創建一個包含橢圓形，多邊形的一組元素，一個文本元素。當顯示時，這些組合將看起來像一個講話泡泡

//Create the tooltip label 
var tooltipG = svg.append("g") 
    .attr("transform", "translate(" + xPosition + "," + yPosition + ")"); 

tooltipG.append("polygon") 
    .attr("points", "0,0 0,-50, 50,-50") 
    .style("fill", "grey"); 

tooltipG.append("ellipse") 
    .attr("cx", 0) 
    .attr("cy", -75) 
    .attr("rx", 100) 
    .attr("ry", 50) 
    .style("fill", "grey") 

tooltipG.append("text") 
    .attr("dy", -75) 
    .text(("x = "+d3.round(xPosition,2)+",y = "+d3.round(yPosition,2));

來源

2016-01-15 20:02:07

d3js - 添加類似工具提示的語音氣泡？

回答

相關問題