Как добавить панель поиска в R networkD3 :: forceNetwork graph - PullRequest
Новая
       39

Как добавить панель поиска в R networkD3 :: forceNetwork graph

0 голосов
/ 07 марта 2020

Я пытаюсь добавить окно поиска в график ForceNetwork (код ниже). Я попробовал решения по этой ссылке Поле поиска в сети Участок . Но они не производят никакого окна поиска. Буду признателен за любые предложения. 

library(htmltools)
library(networkD3)

data(MisLinks)
data(MisNodes)

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

print(fn)

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()
        )
    )
)

Я добавил print (fn), иначе код не отображал сюжет.

...