首页 > 解决方案 > 有没有办法让 Force Network D3 标签永久保留,而不是悬停在上面?

问题描述

这是我的程序:

networkD3::forceNetwork(Links = links.d3, Nodes = nodes.d3,
                        Source = "from", Target = "to", 
                        NodeID = "node_id", Group = "group_id",
                        zoom = TRUE, opacity = 1.0, legend = TRUE,
                        fontSize = 12)

然后我尝试了: onRender(network, "function(el,x) { d3.selectAll('.node').on('mouseover', null); }")

这只是一起删除了标签。理想情况下,我希望能够单击一个节点,然后在我将鼠标悬停离开它之后保留节点的标签。

谢谢!!

标签: rnetworkd3

解决方案


用作函数opacityNoHover = 1的参数forceNetwork()。此选项和所有其他选项都在帮助文件中(?networkD3::forceNetwork在控制台中输入)。这将使所有标签始终可见。

如果您想在将鼠标移离节点时防止标签消失,只需修改代码以使mouseout事件而不是mouseover事件为空... onRender(network, "function(el,x) { d3.selectAll('.node').on('mouseout', null); }")


更新 2020.04.09

这是一个解决方案,用于单击打开或关闭该节点的标签...

library(networkD3)
library(htmlwidgets)
network <- 
  forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source",
               Target = "target", Value = "value", NodeID = "name",
               Group = "group", opacity = 1)

clickjs <- 
"function(el, x) { 
  var options = x.options;
  var svg = d3.select(el).select('svg');
  var node = svg.selectAll('.node');
  var link = svg.selectAll('link');
  var mouseout = d3.selectAll('.node').on('mouseout');
  function nodeSize(d) {
    if (options.nodesize) {
      return eval(options.radiusCalculation);
    } else {
      return 6;
    }
  }

  d3.selectAll('.node').on('click', onclick);

  function onclick(d) {
    if (d3.select(this).on('mouseout') == mouseout) {
      d3.select(this).on('mouseout', mouseout_clicked);
    } else {
      d3.select(this).on('mouseout', mouseout);
    }
  }

  function mouseout_clicked(d) {
    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);});
    d3.select(this).select('text').transition()
      .duration(1250)
      .attr('x', 0)
      .style('font', options.fontSize + 'px ');
  }
}
"

onRender(network, clickjs)

在此处输入图像描述


推荐阅读