Javascript 如何根据名称搜索某个节点？_Javascript_D3.js_Force Layout

Javascript 如何根据名称搜索某个节点？

javascript d3.js

Javascript 如何根据名称搜索某个节点？,javascript,d3.js,force-layout,Javascript,D3.js,Force Layout,基于这个简单的例子，我在D3.js中得到了一个力定向图：现在，我在CSS部分添加了一个字段来输入一些文本。我的目标是构建一种搜索框，根据节点名称查找节点。这意味着，如果我输入“Joly”，那么应该突出显示具有该名称的节点。问题是如何解决这个问题 <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-

基于这个简单的例子，我在D3.js中得到了一个力定向图：

现在，我在CSS部分添加了一个字段来输入一些文本。我的目标是构建一种搜索框，根据节点名称查找节点。这意味着，如果我输入“Joly”，那么应该突出显示具有该名称的节点。问题是如何解决这个问题

  <style> 
    input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 2px solid red;
        border-radius: 4px;
    }
    </style>
    </head>
    <body>

    <p>Text fields with borders:</p>

    <form>
      <label for="fname">Some Input</label>
      <input type="text" id="fname" name="fname">
    </form>
    <script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .gravity(0.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

d3.json("graph.json", function(error, json) {
  if (error) throw error;

  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link");

  var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("image")
      .attr("xlink:href", "https://github.com/favicon.ico")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);

  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });
});

</script>


输入[类型=文本]{
宽度：100%；
填充：12px 20px；
利润率：8px0；
框大小：边框框；
边框：2倍纯红；
边界半径：4px；
}
带边框的文本字段：
一些输入
可变宽度=960，
高度=500
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.重力（0.05）
.距离（100）
。收费（-100）
.尺寸（[宽度、高度]）；
d3.json（“graph.json”，函数（错误，json）{
如果（错误）抛出错误；
力
.nodes（json.nodes）
.links（json.links）
.start（）；
var link=svg.selectAll（“.link”）
.data（json.links）
.enter（）.append（“行”）
.attr（“类”、“链接”）；
var node=svg.selectAll（“.node”）
.data（json.nodes）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.呼叫（强制拖动）；
node.append（“图像”）
.attr（“xlink:href，”https://github.com/favicon.ico")
.attr（“x”，-8）
.attr（“y”，-8）
.attr（“宽度”，16）
.attr（“高度”，16）；
node.append（“文本”）
.attr（“dx”，12）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name}）；
force.on（“勾号”，函数（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
});
});

搜索所有节点并检查每个节点的名称数据值

d3.select("#fname").on("input", function() {
var inputValue = this.value;
node.each(function (d) {
    var highLight = "black";
    if(d.name.toLowerCase() == inputValue.toLowerCase()) highLight = "red";
    d3.select(this).style("fill", highLight);
});
});

var-width=960，
高度=500
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.重力（0.05）
.距离（100）
。收费（-100）
.尺寸（[宽度、高度]）；
var json={“nodes”：[{“name”：“Myriel”，“group”：1}，{“name”：“poleon”，“group”：1}，{“name”：“Mlle.Baptistine”，“group”：1}，{“name”：“Mme.Magloire”，“group”：1}，{“CountessdeLo”，“group”：1}，{“name”：“Geborand”，“group”：1}，{“name”：“Champtercier”，“group”：1}，{“name”：“crav，“集团”：2}，{“名称”：“阿让”，“集团”：2}，{“名称”：“玛格丽特”，“集团”：3}，{“名称”：“德尔夫人”，“集团”：2}，{“名称”：“伊莎博”，“集团”：2}，{“名称”：“热尔韦”，“集团”：2}，{“名称”：“多罗米埃”，“集团”：3}，{“名称”：“利斯托利埃”，“集团”：3}，{“名称”：“法梅伊”，“集团”：3}，{“名称”：“布拉切维尔”，“集团”：3}，{“名称”：“最喜欢的集团”，“最喜欢的集团”：3}，{“集团”：“泽芬”，“集团”：3}，{“姓名”：“芳汀”，“集团”：3}，{“姓名”：“德纳第夫人”，“集团”：4}，{“姓名”：“德纳第”，“集团”：4}，{“姓名”：“珂赛特”，“集团”：5}，{“姓名”：“沙威”，“集团”：4}，{“姓名”：“割风”，“集团”：0}，{“姓名”：“巴马塔博伊斯”，“集团”：2}，{“姓名”：“永久”，“集团”：3}，{“姓名”：“Simplice”，“集团”：2}，{“姓名”：“斯考菲雷”，“集团”：2}，{“妇女1”，“团体”：2}，{“姓名”：“法官”，“团体”：2}，{“姓名”：“尚马修”，“团体”：2}，{“姓名”：“布雷维特”，“团体”：2}，{“姓名”：“切尼尔迪厄”，“团体”：2}，{“科切贝利”，“团体”：2}，{“姓名”：“彭眉胥”，“团体”：4}，{“姓名”：“布拉“，”组“：”0}，“{”名“：”格里比尔“，”组“：”0}，{”名“：”容德雷特“，”组“：”7}，{”名“：”伽弗洛什“，”组“：”8}，{”名“：”吉诺曼“，”组“：”马侬“，”组“：”5}，{”名“：”姆勒·吉诺曼“，”组“，”5}，{”名“，”庞眉胥梅茜“，”组“：”5}，{”名“，”组“：”名“：”姆勒·沃布瓦伊曼“，”组“，”名“，”吉诺曼“，”组“，”5}，{“马吕斯”，“集团”：8}，{“姓名”：“巴罗内斯特”，“集团”：5}，{“姓名”：“马白夫”，“集团”：8}，{“姓名”：“安灼拉”，“集团”：8}，{“姓名”：“公白飞”，“集团”：8}，{“普洛维尔”，“集团”：8}，{“姓名”：“费伊利”，“集团”：8}，{“姓名”：“古费拉克”，“集团”：8}，{“姓名”：“巴奥雷尔”，“集团”：8}，{“姓名”：“姓名”：“博须埃”，“集团”：8}，{“集团”：8}，{，"姓名","团体":9,"姓名","盖勒默","团体","团体"4,"团体","团体"4,"团体"4,"团体","团体"4","团体","团体"名称"图桑,"团体"5,","团体"团体,"，“值”：1}，{“源”：2，“目标”：0，“值”：8}，{“源”：3，“目标”：0，“值”：10}，{“源”：3，“目标”：2，“值”：6}，{“源”：4，“目标”：0，“值”：1}，{“源”：5，“目标”：0，“值”：1}，{“源”：6，“目标”：0，“值”：1}，{“源”：7，“目标”：0，“值”：1}，{“源”：8，“目标”：0，“值”：2}，{“源”：9，“目标”：0，“值”：1，“源”：10}，{“目标”：10}“：1}，{“源”：11，“目标”：3，“值”：3}，{“源”：11，“目标”：2，“值”：3}，{“源”：11，“目标”：0，“值”：5}，{“源”：12，“目标”：11，“值”：1}，{“源”：13，“目标”：11，“值”：1}，{“源”：14，“目标”：11，“值”：1}，{“源”：15，“目标”：11，“值”：1}，{“源”：17，“目标”：16，“值”：4}，{“源”：18，“目标”：16，“值：4}，{：17，“值”：4}，{“源”：19，“目标”：16，“值”：4}，{“源”：19，“目标”：17，“值”：4}，{“源”：19，“目标”：18，“值”：4}，{“源”：20，“目标”：16，“值”：3}，{“源”：20，“目标”：17，“值”：3}，{“源”：20，“目标”：18，“值”：3}，{“源”：20，“目标”：19，“值”：4}，{“源”：21，“目标”：16，“值”：3}，{“源”：21，“目标”：17，“值”：3}，{“源”：21，“target”：18，“value”：3}，{“source”：21，“target”：19，“value”：3}，{“source”：21，“target”：20，“value”：5}，{“source”：22，“target”：16，“value”：3}，{“source”：22，“target”：17，“value”：3}，{“source”：22，“ta”