在 <svg> 容器中通过 d3 实现 <div> 工具提示

Question

总的来说，我对 D3、svg 和 javascript 比较陌生，所以请多多包涵：]

我一直在尝试使用 D3 创建绘图和图形。我使用 D3 创建了一个小图，并一直试图使其与 IE8 兼容。这是我的图表的或多或少工作构建的链接。

http://jsfiddle.net/kingernest/YDQR4/1/

经过一番研究，我很快意识到，在 IE8 上运行 D3 的唯一可行方法是将其他 API 与 D3 结合使用。幸运的是，我发现有人已经在一个名为“r2d3”的项目中投入了一些工作，据我了解，该项目使用 raphael 在 IE8 窗口上绘制画布，而不是使用 SVG（IE8 显然不支持）。

我已经能够在屏幕上绘制物品，这是成功的一半。但是，我遇到了很多问题，尤其是我的工具提示。我的工具提示被编写为一个 DIV 容器，它在数据圈悬停时浮动并更改位置/不透明度。这似乎在其他浏览器中工作正常，但使用 r2d3，我无法让它工作。我怀疑这是因为我在（在#main div 中）之外创建了 div 工具提示。但是，我尝试将工具提示放置在 SVG 容器内，但无济于事。然后我做了更多的研究，发现我必须在标签内包装一个 div 容器，但经过一些实验后，我仍然无法让工具提示在 IE 中正常工作。我试图将其包装在一个 SVG 组 () 中，并改为更改该对象的位置，但这似乎也不起作用，并且在尝试将 foreignObject 标记附加到组时出现了许多异常。

此时我有点卡住了，想知道是否有人对我如何能够成功实施工具提示有任何建议。我还注意到，在我的函数中使用 d3.select(this) 尝试选择特定数据点（在本例中为一个圆圈）时，在尝试访问或修改该项目的属性时似乎会出现许多问题，但我认为这完全是另一个问题。

非常感谢任何帮助！

我当前如何创建工具提示的示例：

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

}

Answer 1

您是否尝试过使用foreignObjects AND 在foreignObject（写xhtml:div 而不是div）中显式使用xhtml 命名空间，如下所述：HTML element inside SVG not displayed？

这将为工具提示定义提供类似的东西

 var tooltip = d3.select("#main").append("foreignObject")
     .append("xhtml:div")
         .attr("类", "工具提示")
     .style("位置", "绝对")
     .style("z-index", "10")
     .style("不透明度", 0);