在工具提示 d3 中显示数据内容

Question

我按照 this 示例将工具提示添加到我的圈子，显示在地图上。

var tooltip = d3.select("body")
    .append("div")
    .attr("id", "mytooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

然后我得到了这个鼠标悬停

// callbackfunction preparing the data
// then

var feature = g.selectAll("circle")
    .data(data.features)
    .enter()
    .append("circle")
//...

feature.on("mouseover",function(d) { 
    d3.select(this)
    .transition()
    .ease("elastic")
    .duration(500)
    .attr('r', function (d){ 
              return (d.features.xy);
          })
    d3.select("#mytooltip")
    .style("visibility", "visible")
    .text(function(d) {
        console.log(d.features.xy)
        return (d.features.xy)
     })

即不显示xy的值。 console.log 的输出是：

TypeError: undefined is not an object (evaluating 'd.xy')

问题显然是在 d3.select("#mytooltip") 语句中我输入了 var tooltip 而我的 data.features... 没有绑定到。如何将圆圈绑定到鼠标悬停（在调用 d3.select 后在 var feature = g.selectAll("circle") 中创建？

Answer 1

.data 函数需要一个数组，分布在几个元素中（"data" 是复数）。如果你想给一个单一的元素"piece of data"（即你的tooltip），你需要.datum函数：

tooltip.datum(myData)

或者，您可以这样做：

tooltip.data([myData])

在您的原始代码中，由于您没有 tooltip 变量（就此而言，也没有 myData），您可以将其插入 mouseover 事件：

(...)
 d3.select("#mytooltip")
   .datum(d)
   .style("visibility", "visible")
(...)

另一种选择：您可以直接绘制工具提示，而无需绑定任何数据：

d3.select("#mytooltip")
   .style("visibility", "visible")
   .text(d.features.xy);

这里 d 仍然指的是您鼠标悬停的对象的数据，所以这应该也能正常工作。

在工具提示 d3 中显示数据内容

Show content from data in tooltip d3

javascript

mouseover

mouseevent

d3.js