如何在D3中創建工具提示以便在圖形中的節點上的MouseOver上獲取圖像

我有一個D3應用程序，該應用程序正在形成一個圖形，該圖形上有一些顯示該圖形幾年的節點，並且還顯示了一些信息在節點上做一個mouseover事件時。現在，當我們將鼠標懸停在圖形的節點上時，我想在鼠標懸停事件上顯示圖像。我曾在TSV文件中的一些變化，但不影響和不coming.here的圖片是我做了什麼，如何在D3中創建工具提示以便在圖形中的節點上的MouseOver上獲取圖像

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> /* set the CSS */ 

body { font: 12px Arial;} 

path { 
    stroke: green; 
    stroke-width: 2; 
    fill: none; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: grey; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 

div.tooltip {     /* set the CSS for tooltip divs */ 
    position: absolute;   /* reference for measurement */ 
    text-align: center;   /* align the text to the center */ 
    width: 60px;     /* set the width of the rectangle */ 
    height: 28px;     /* set the height of the rectangle */ 
    padding: 2px;     /* set a border around the rectangle */ 
    font: 12px sans-serif;  /* set the font type for the tooltips */ 
    background: lightsteelblue; /* set the colour of the rectangle */ 
    border: 0px;     /* turn off the border (0px) */ 
    border-radius: 8px;   /* set how rounded the edges of the rectangle is */ 
    pointer-events: none;   /* 'none' tells the mouse to ignore the rectangle */ 
} 

</style> 
<body> 

<!-- load the d3.js library --> 
<script type="text/javascript" src="d3/d3.v3.min.js"></script> 

<script> 

    // Set the dimensions of the canvas/graph 
    var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
    width = 600 - margin.left - margin.right, 
    height = 270 - margin.top - margin.bottom; 

    // Parse the date/time 
    var parseDate = d3.time.format("%d-%b-%y").parse; 
    var formatTime = d3.time.format("%e %B");   // Format the date/time for tooltips 


    // Set the ranges 
    var x = d3.time.scale().range([0, width]); 
    var y = d3.scale.linear().range([height, 0]); 

    // Define the axes 
    var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom").ticks(5); 

    var yAxis = d3.svg.axis().scale(y) 
    .orient("left").ticks(5); 

    // Define the line 
    var valueline = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.close); }); 

    // Define 'div' for tooltips 
    var div = d3.select("body").append("div") // declare the properties for the div used for the tooltips 
    .attr("class", "tooltip")    // apply the 'tooltip' class 
    .style("opacity", 0);     // set the opacity to nil 

    // Adds the svg canvas 
    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 + ")"); 

    // Get the data from external file 
    d3.tsv("data/data.tsv", function(error, data) { 
     data.forEach(function(d) { 
      d.date = parseDate(d.date); 
      d.close = +d.close; 
     }); 

     // Scale the range of the data 
     x.domain(d3.extent(data, function(d) { return d.date; })); 
     y.domain([0, d3.max(data, function(d) { return d.close; })]); 

     // Add the valueline path. 
     svg.append("path")  
     .attr("class", "line") 
     .attr("d", valueline(data)); 

     // draw the scatterplot 
     svg.selectAll("dot")          
     .data(data)           
     .enter().append("circle")        
     .attr("r", 5)           // Made slightly larger to make recognition easier 
     .attr("cx", function(d) { return x(d.date); })  
     .attr("cy", function(d) { return y(d.close); })   // remove semicolon 
     // Tooltip stuff after this 
     .on("mouseover", function(d) {       // when the mouse goes over a circle, do the following 
      div.transition()         // declare the transition properties to bring fade-in div 
      .duration(200)         // it shall take 200ms 
      .style("opacity", .9);       // and go all the way to an opacity of .9 
      div .html(formatTime(d.date) + "<br/>" + d.close) // add the text of the tooltip as html 
      .style("left", (d3.event.pageX) + "px")   // move it in the x direction 
      .style("top", (d3.event.pageY - 28) + "px"); // move it in the y direction 
     })             // 
     .on("mouseout", function(d) {       // when the mouse leaves a circle, do the following 
      div.transition()         // declare the transition properties to fade-out the div 
      .duration(500)         // it shall take 500ms 
      .style("opacity", 0);       // and go all the way to an opacity of nil 
     });              // finis 

     // Add the X Axis 
     svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

     // Add the Y Axis 
     svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    }); 

</script> 
    </body>

而且這個TSV文件我有

date close 
1-May-12 58.13 
30-Apr-12 53.98 
27-Apr-12 67.00 
26-Apr-12 89.70 
25-Apr-12 99.00 
24-Apr-12 130.28 
23-Apr-12 166.70 
20-Apr-12 234.98 
19-Apr-12 345.44 
18-Apr-12 443.34 
17-Apr-12 543.70 
16-Apr-12 580.13 
13-Apr-12 605.23 
12-Apr-12 622.77 
11-Apr-12 626.20 
10-Apr-12 628.44 
9-Apr-12 636.23 
5-Apr-12 633.68 
4-Apr-12 624.31 
3-Apr-12 629.32 
2-Apr-12 618.63 
30-Mar-12 599.55 
29-Mar-12 609.86 
28-Mar-12 617.62 
27-Mar-12 614.48 
26-Mar-12 606.98

這裏這裏的tsv文件我已經將關閉值更改爲一個圖像字符串，即在606.98的最後一列中，我將添加「1.png」，但它不會在圖形上的鼠標懸停上出現....有人請幫助

有人請幫忙...

來源

2013-11-03 lucifer

你見過動態生成[本教程（http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html）？ –

@LarsKotthoff謝謝關注我的問題，我看到了教程，但仍然有問題 – lucifer

@lucifer，你的代碼工作正常。你看不到什麼圖像？我在這裏嘗試了你的代碼：http://vida.io/documents/eKhA2zpxTz8vxZGW9。 –

您必須在每個鼠標懸停的html上添加圖片標籤，並使用動態生成的圖片路徑。你可以使用div名稱等

string yourImagePath = ""; // you will have to set the image path here 
    svg.selectAll("text") 
      .data(dataset) 
      .enter() //here you would add all the other d3 functions that make it sensible 
    .on("mouseover", function(d) { // the mouseover event  
       div.transition()   
        .duration(200)  
        .style("opacity", .85); 
       var string = "<img src= + " yourImagePath " + />"; 
       div .html(string) //this will add the image on mouseover 
        .style("left", (d3.event.pageX + 10) + "px")  
        .style("top", (d3.event.pageY + 50) + "px") 
        .style("font-color", "white"); 

       }

來源

2014-01-06 12:42:34

如何在D3中創建工具提示以便在圖形中的節點上的MouseOver上獲取圖像

回答

相關問題