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

Question

如何通过 d3,tip 显示所选节点的一级邻居(我的意思是悬停在节点上)？

这是我的 d3.tip 部分

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

如何更改以下内容以帮助我通过提示返回文本而不是更改不透明度？

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;
    }}

Answer 1

这是我如何使用不同的力定向图来做到这一点(应该很容易在您的图中实现)。

当您第一次运行脚本时，我会运行 connectedNodes 函数，但我不会更改不透明度，而是将邻居添加到数组中，然后将其附加到每个节点上的数据。

这里有一个工具提示(悬停时)，显示它连接到的所有节点(node.name):http://jsfiddle.net/reko91/jz2AU/125/

创建节点后运行该函数:

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
}

请注意，我创建了两个属性:neighboursString 和 neighbours。

-neighboursString:连接所有邻居以创建工具提示

-neighbours:所有邻居节点的数组(如果稍后需要)

现在创建工具提示(在第二个答案的帮助下:Show data on mouseover of circle)。显然，在您的情况下，您不需要这个，因此只需将 currentNode.neighboursString 传递给 d3.tip，应该很简单:

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

现在在悬停时显示和编辑工具提示:

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");
  });

希望能解决您的问题，在我展示的示例中，您仍然可以通过双击来使用邻居:)