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不是对象（评估＆＃39; d.xy＆＃39;）

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

Answer 1

.data函数期望一个数组，分布在几个元素之间（“data”是复数）。如果您想将单个“数据”提供给单个元素（即tooltip），则需要.datum函数：

tooltip.datum(myData)

或者，您可以这样做：

tooltip.data([myData])

在原始代码中，由于您没有tooltip变量（也不是myData），您可以将其插入鼠标悬停事件：

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

另一种选择：您可以直接绘制工具提示，而不会将任何数据绑定到它：

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

此处d仍指向您鼠标悬停的对象的数据，因此这也可以正常工作。

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

1 个答案: