пакет networkD3: показывать имена узлов всех подключенных узлов при наведении курсора

Question

Используя функцию forceNetwork пакета networkD3, можно создать интерактивный сетевой график, который может отображать имена узлов при наведении на них курсора.

Я пытаюсь создать график, который показывает не только узел, над которым находится мышь, но также все соседние узлы, то есть все узлы, которые напрямую связаны с выбранным узлом. Тем не менее, он не должен показывать какие-либо узлы, которые не связаны напрямую с узлом.

Хотя я нашел аргумент opacityNoHover, он повлияет на все узлы, которые не покрывает мышь, а не только на узлы с прямым соединением.

library(networkD3)
# example data
data(MisLinks)
data(MisNodes)

# creating the plot
 forceNetwork(Links = MisLinks, Nodes = MisNodes,
         Source = "source", Target = "target",
         Value = "value", NodeID = "name",
         Group = "group", opacity = 1, fontSize = 15,
         opacityNoHover = 0)

Answer 1

Вы можете переписать функции mouseover и mouseout и переопределить их с помощью htmlwidgets::onRender ...

library(networkD3)
library(htmlwidgets)

data(MisLinks)
data(MisNodes)

fn <- forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source", 
                   Target = "target", Value = "value", NodeID = "name",
                   Group = "group", opacity = 1, fontSize = 15, 
                   opacityNoHover = 0)
customJS <- '
function(el,x) { 
    var link = d3.selectAll(".link")
    var node = d3.selectAll(".node")

    var options = { opacity: 1,
                    clickTextSize: 10,
                    opacityNoHover: 0.1,
                    radiusCalculation: "Math.sqrt(d.nodesize)+6"
                  }

    var unfocusDivisor = 4;

    var links = HTMLWidgets.dataframeToD3(x.links);
    var linkedByIndex = {};

    links.forEach(function(d) {
      linkedByIndex[d.source + "," + d.target] = 1;
      linkedByIndex[d.target + "," + d.source] = 1;
    });

    function neighboring(a, b) {
      return linkedByIndex[a.index + "," + b.index];
    }

    function nodeSize(d) {
            if(options.nodesize){
                    return eval(options.radiusCalculation);
            }else{
                    return 6}
    }

    function mouseover(d) {
      var unfocusDivisor = 4;

      link.transition().duration(200)
        .style("opacity", function(l) { return d != l.source && d != l.target ? +options.opacity / unfocusDivisor : +options.opacity });

      node.transition().duration(200)
        .style("opacity", function(o) { return d.index == o.index || neighboring(d, o) ? +options.opacity : +options.opacity / unfocusDivisor; });

      d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", function(d){return nodeSize(d)+5;});

      node.select("text").transition()
        .duration(750)
        .attr("x", 13)
        .style("stroke-width", ".5px")
        .style("font", 24 + "px ")
        .style("opacity", function(o) { return d.index == o.index || neighboring(d, o) ? 1 : 0; });
    }

    function mouseout() {
      node.style("opacity", +options.opacity);
      link.style("opacity", +options.opacity);

      d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", function(d){return nodeSize(d);});
      node.select("text").transition()
        .duration(1250)
        .attr("x", 0)
        .style("font", options.fontSize + "px ")
        .style("opacity", 0);
    }

    d3.selectAll(".node").on("mouseover", mouseover).on("mouseout", mouseout);
}
'
onRender(fn, customJS)