Question

关于堆栈溢出，还有另一个问题涉及搜索节点here。我很想在我的网络中使用它，但是由于它的大小（> 1000个节点），因此无法突出显示。很好，但它的节点很小，因此当只有一个可见的节点时，很难在整个屏幕上看到它。因此，我希望搜索功能可以放大该节点。我将在此处复制并粘贴其他问题的答案代码：

library(htmltools)
library(networkD3)

data(MisLinks)
data(MisNodes)

# make a forceNetwork as shown in ?forceNetwork
fn <- forceNetwork(
  Links = MisLinks, Nodes = MisNodes, Source = "source",
  Target = "target", Value = "value", NodeID = "name",
  Group = "group", opacity = 0.4, zoom = TRUE
)

fn <- htmlwidgets::onRender(
  fn,
  '
function(el,x){
debugger;
  var optArray = [];
  for (var i = 0; i < x.nodes.name.length - 1; i++) {
    optArray.push(x.nodes.name[i]);
  }

  optArray = optArray.sort();

  $(function () {
    $("#search").autocomplete({
      source: optArray
    });
  });

  d3.select(".ui-widget button").node().onclick=searchNode;

  function searchNode() {
    debugger;
    //find the node

    var selectedVal = document.getElementById("search").value;
    var svg = d3.select(el).select("svg");
    var node = d3.select(el).selectAll(".node");

    if (selectedVal == "none") {
      node.style("stroke", "white").style("stroke-width", "1");
    } else {
      var selected = node.filter(function (d, i) {
        return d.name != selectedVal;
      });
      selected.style("opacity", "0");
      var link = svg.selectAll(".link")
      link.style("opacity", "0");
      d3.selectAll(".node, .link").transition()
        .duration(5000)
        .style("opacity", 1);
    }
  }
}  
  '
)

browsable(
  attachDependencies(
    tagList(
      tags$head(
        tags$link(
          href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css",
          rel="stylesheet"
        )
      ),
      HTML(
  '
  <div class="ui-widget">
      <input id="search">
      <button type="button">Search</button>
  </div>
  '     
      ),
      fn
    ),
    list(
      rmarkdown::html_dependency_jquery(),
      rmarkdown::html_dependency_jqueryui()
    )
  )
)

我环顾了bl.ocks.org，发现了可以解决问题的here。尤其是这段代码：

svg.transition()
      .duration(750)
  .call(zoom.translate(translate).scale(scale).event);

我想我可以在这里插入它

………………> 
selected.style("opacity", "0");
svg.transition()
      .duration(750)
      .call(zoom.translate(translate).scale(scale).event);

这似乎不起作用，并且由于对JavaScript的了解有限，我也无法使其起作用。除了解决方案之外，还需要简短说明！

R：networkD3添加缩放功能

0 个答案: