Question

我有一个有点嵌套的JSON文件：

{
  "name": "1370",
  "children": [
    {
      "name": "Position X",
      "value": -1
    },
    {...}
  ]
  "matches": [
    {
      "certainty": 100,
      "match": {
        "name": "1370",
        "children": [
          {
            "name": "Position X",
                "value": -1
          },
          {...}
        ]
      }
    }
  ]
}

我想使用修改后的Collapsible Tree来显示它。我想在悬停相应节点时显示“匹配”和“确定性”。我已经使用了simple tooltip example。

现在我有这样的事情：

  var nodeEnter = node.enter().append("g")
      ...
      .on("mouseover", function(d) {
          if (d.matches) {
            return tooltip.style("visibility", "visible")
              .text( function(d) { return d.name; } );
          }
       } )
      ...
      ;

我只是使用d.name进行测试。我想稍后写一个更复杂的功能。但这根本不起作用。我得到一个工具提示，但它是空的（或包含默认值）。我不明白的一点是，以下是有效的：

if (d.matches) {
  return tooltip.style("visibility", "visible")
    .text( d.name );
}

因此在我看来，功能在这一点上不起作用。我做错了什么？

Answer 1

你犯的错误是在你调用jQuery的.text（）方法时，你传递的是一个函数，但你要传入的是该函数的返回值。为了做到这一点，你只需要使用它期望的参数调用你传入的函数：

var nodeEnter = node.enter().append("g")
  ...
  .on("mouseover", function(d) {
      if (d.matches) {
        return tooltip.style("visibility", "visible")
          .text( function(d) { return d.name; }(d) );
      }
   } )
  ...
  ;

注意在声明

之后如何使用（d）调用该函数

Answer 2

linked example中的tooltip没有与之关联的任何数据。因此，如果您尝试将text function与访问者一起使用，则无法获取任何数据。

我的猜测是，您不想从tooltip获取数据，而是使用D3传递给mouseover事件的数据：

var nodeEnter = node.enter().append("g")
  ...
  .on("mouseover", function(d) { // <-- This is the data passed by D3, associated to your node.
      if (d.matches) {
        var newName = computeNameFromData(d);
        return tooltip.style("visibility", "visible")
          .text( newName ); // <-- Just pass a string here.
      }
   } )
  ...
  ;

简单函数在if语句中不起作用

2 个答案: