Question

此实验基于Health & Wealth of Nations示例。当鼠标悬停在每个点上时，我正试图显示工具提示样式的标签并漂浮在每个点上方。每个数据元素都有一个名为“name”的属性，我想在工具提示中显示。为了简洁起见，我省略了大部分不相关的代码。

// Create all the dots, one for each data point.
var dot = svg.append("g")
    .attr("class", "dots")
  .selectAll(".dot")
    .data(myData)
  .enter().append("circle")
    .attr("class", "dot")
    .call(position)
    .call(enableInteraction)
    .sort(order);

// Create a tooltip element.
var tooltip = svg.append("text")
    .attr("class", "tooltip");

// Assign each of the dots the various mouse events.
function enableInteraction(dot) {
  dot.on("mouseover", mouseover)
     .on("mouseout", mouseout)
     .on("mousemove", mousemove);

  function mouseover() {
    tooltip.text(???); // How do I get the name into here?
  }

  function mouseout() {
    tooltip.text("");
  }

  function mousemove() {
    var cursor = d3.mouse(this);
    tooltip.attr("x", cursor[0] + 5)
           .attr("y", cursor[1] + 5);
  }
}

我尝试使用函数检索名称并将其传递给enableInteraction（），如下所示：

.call(enableInteraction, function(d) { return d.name; } )

但正在传递函数对象而不是其返回值。

那么如何让每个数据元素的名称显示在工具提示中？

Answer 1

您可以使用currying技术将该信息输入 mouseover 事件处理程序。我不确定获取名称的语法，但这是个主意：

// this function returns a function
function moveoverHandler(dot) {
    return function mouseover() {

        // I'm not sure if this is how you get the "name" property from the "dot" object 
        // Please update this as needed
        var name = dot.data("name");  

        tooltip.text(name);  
    }
}

然后像这样连接处理程序：

dot.on("mouseover", mouseover(dot));

在d3.js中将数据传递给.call

1 个答案: