Javascript d3工具提示中的一级节点邻居

如何通过d3，tip显示所选节点的1阶邻域（我指的是在节点上悬停）

这是我的d3.tip部分

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .html(function(d) {return [name of neighbors];});

如何更改follow以帮助我通过提示返回文本，而不是更改不透明度

var linkedByIndex = {};
var toggle = 0;
for (i = 0; i < nodes.length; i++) {
    linkedByIndex[i + "," + i] = 1;
};
links.forEach(function (d) {
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});

//This function looks up whether a pair are neighbours  
function neighboring(a, b) {
    return linkedByIndex[a.index + "," + b.index];
}

function connectedNodes() {

    if (toggle == 0) {
        //Reduce the opacity of all but the neighbouring nodes
        d = d3.select(this).node().__data__;
        circle.style("opacity", function (o) {
            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
        });

        path.style("opacity", function (o) {
            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
        });

        //Reduce the op

        toggle = 1;
    } else {
        //Put them back to opacity=1
        circle.style("opacity", 1);
        path.style("opacity", 1);
        toggle = 0;
    }}

var linkedByIndex={}；
var=0；
对于（i=0；i

以下是我将如何使用不同的力定向图（应该很容易实现到您的力定向图中）

当您第一次运行脚本时，我会运行

connectedNodes

函数，但是我不会更改不透明度，而是将邻居添加到数组中，然后将其附加到每个节点上的数据中

这里有一个显示所有节点（node.name）的工具提示（悬停时）：

创建节点后运行函数：

node.each(function(d) {
  //console.log(d)
  connectedNodes1(this)
})

以下是更改后的函数：

function connectedNodes1(thisNode) {

  d = d3.select(thisNode).node().__data__;

  var neighbours = [];
  node.each(function(o) {

    // console.log(o)
    if (neighboring(d, o) | neighboring(o, d)) {
      neighbours.push(o.name) //push into array
    }

  });
  d3.select(thisNode).node().__data__.neighboursString =""; //set the attribute to nothing

  for (i = 0; i < neighbours.length; i++) { //go through each element in the array to create one string
    var thisString = neighbours[i] + ' | '; //add a split so it can be easily read
    d3.select(thisNode).node().__data__.neighboursString += (thisString); //concat to attribute
  }
  d3.select(thisNode).node().__data__.neighbours = neighbours; //set neighbours to neighbours array above if you want to use any of the nodes later
}

现在要显示和编辑悬停时的工具提示：

node.on("mouseover", function(d) {
    tooltip.text(d.neighboursString); //set text to neighboursString attr
    return tooltip.style("visibility", "visible");
  })
  .on("mousemove", function(d) {
  tooltip.text(d.neighboursString);
    return tooltip.style("top",
      (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    return tooltip.style("visibility", "hidden");
  });

---

希望这能解决您的问题，您仍然可以在我展示的示例中双击邻居：）

您能将代码放在一个工作的小提琴中吗。@omicronAlpha我的答案解决了您的问题吗？@ThisonEy是的！谢谢，很抱歉迟了回复

node.on("mouseover", function(d) {
    tooltip.text(d.neighboursString); //set text to neighboursString attr
    return tooltip.style("visibility", "visible");
  })
  .on("mousemove", function(d) {
  tooltip.text(d.neighboursString);
    return tooltip.style("top",
      (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    return tooltip.style("visibility", "hidden");
  });