Implementing <div> tooltips via d3 within an <svg> container

I’m relatively new to D3, svg, and javascript in general, so please bear with me :]

I have been experimenting with D3 for creating plots and graphs. I have created a small plot using D3 and have been attempting to make it compatible with IE8. Here is a link to the more-or-less working build of my graph.

  • D3 Axis ticks hard count
  • Adding text to the center of a D3 Donut Graph
  • d3 Bounded Force layout with Zoom and Pan
  • Changing size of rect to fit inside text
  • vertically distributed funnel chart with d3js
  • scale an SVG group element to have a path centered in viewport dynamically on click
  • http://jsfiddle.net/kingernest/YDQR4/1/

    After some research, I quickly realized that the only way running D3 on IE8 would be at all feasible is by using other APIs in conjunction with D3. Luckily, I found that someone had already put in some work into a project called “r2d3” which, from my understanding, uses raphael to paint the canvas on the IE8 window instead of using SVG (which apparenly was not supported in IE8).

    I have been able to get items drawn on the screen, which is half the battle. However, I’m having many issues, particularly with my tooltip. My tooltip is written as a DIV container that floats and changes position/opacity on hover of the data circles. This seems to work fine in other browsers, but with r2d3, I have not been able to get it working. I suspect this is because of the fact that I am creating the div tooltip outside of the (in the #main div). However, I have tried placing tooltips inside of the SVG container with no avail. I then did more reseach and discovered I would have to wrap a div container inside a tag, but after some experimentation with this, I still wasn’t able to get the tooltip to work correctly in IE. I attempted to wrap the in a SVG group (), and altered the positioning of this object instead, but this did not seem to work either, and simply through numerous exceptions when trying to append the foreignObject tag to a group.

    At this point I’m sort of stuck, and was wondering if anyone had any suggestions as to how I may be able to successfully implement the tooltips. I’ve also noticed that using d3.select(this) inside my functions, when attempting to select a particular data point (in this case, a circle) seems to present a number of issues when attempting to access or modify that item’s attributes, but I think this is a whole other issue entirely.

    Any help is greatly appreciated!

    Example of how I’m currently creating the tooltips:

     //Create tooltip element
     var tooltip = d3.select("#main")
         .append("div")
             .attr("class", "tooltip")
         .style("position", "absolute")
         .style("z-index", "10")
         .style("opacity", 0);
    
    function mousemove()
    {    //Move tooltip to mouse location
        return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");                            
    }
    
    //Mouseover function for circles, displays shortened tooltip and causes other circles to become opaque
    function mouseover()
    {
        var myCircle = d3.select(this);
    
        d3.select(this).attr("class", "dataCircleSelected");    //Color circle green
    
        tooltip.html(    //Populate tooltip text
            "Username: " + d3.select(this).attr("username") + "<br/>" +
            "Session ID: " + d3.select(this).attr("sessionid") + "<br/>" + 
            "Impact CPU: " + d3.select(this).attr("impact")            
        )
        .transition()
        .duration(250)
        .style("opacity", .7);
    
        //After 1000ms, make other circle opaque
        svg.selectAll("circle")
        .filter(function(d, i){    //return every other circle
            return !d.compare(myCircle[0][0].__data__);
        })
        .transition().delay(1000)
        .style("opacity", .2);
    
    }
    

  • Getting the lat and long of a click event
  • d3 line smoothing (stronger than monotone)
  • dc.js - data table using jquery data-table plugin
  • d3 zoom: independent X and Y zoom based on pinch angle
  • D3.js (or similar) Overlapping Bar Chart?
  • D3 grouped bar chart: How to rotate the text of x axis ticks?
  • One Solution collect form web for “Implementing <div> tooltips via d3 within an <svg> container”

    Have you tried using foreignObjects AND explicitly using the xhtml namespace for html tags in the foreignObject (write xhtml:div instead of div) as explained here: HTML element inside SVG not displayed ?

    This would give something like that for the tooltip definition

     var tooltip = d3.select("#main").append("foreignObject")
         .append("xhtml:div")
             .attr("class", "tooltip")
         .style("position", "absolute")
         .style("z-index", "10")
         .style("opacity", 0);