我应该如何使用搜索按钮访问大型 JSON 文件中的特定数据？

Question

我的最终目标是使用 d3 创建强制布局，我在其中搜索 ui-widget 类似于：

<div class="ui-widget">
    <input id="search">
    <button type="button" onclick="searchNode()">Search</button>
</div>

我想使用那个 ui-widget 搜索一个节点，当它找到它时我只想显示包含所有 link 和节点 link 的节点. 问题是我在 link 编辑的大 JSON 文件中有多组节点和 links。我不知道我应该如何加载所有这些。以下是我想到的一些选项：

用 key/value -> name/all JSON 的内容以某种方式创建一个 hashmap 并将其推送到数组中。当我使用该搜索按钮进行搜索时，我将只查找键并显示值。
重新格式化 JSON 以包含所有节点和所有 links，分为 2 个大块，不像我现在拥有它们 node/link，节点，link.

我有这么大的JSON，里面有很多JSON的

JSON.json

{
  "nodes": [
    {"id": "Source","label":"source","group": 0},
    {"id": "Parent_1","label":"name6","group": 1},
    {"id": "Parent_2","label":"name5","group": 1},
    {"id": "Parent_3","label":"name4","group": 1},
    {"id": "Child_1","label":"name3","group": 2},
    {"id": "Child_2","label":"name2","group": 2},
    {"id": "Child_3","label":"name1","group": 2},
    {"id": "Child_4","label":"name0", "group": 3}
  ],
  "links": [
    { "source": "Source","target": "Parent_1"},
    { "source": "Source","target": "Parent_2"},
    { "source": "Source","target": "Parent_3"},
    { "source": "Source","target": "Child_1"},
    { "source": "Source","target": "Child_2"},
    { "source": "Source","target": "Child_3"},
    { "source": "Child_2","target": "Child_4"}
  ]
}
{
  "nodes": [
    {"id": "Source","label":"source","group": 0},
    {"id": "Parent_12","label":"name6","group": 1},
    {"id": "Parent_22","label":"name5","group": 1},
    {"id": "Parent_32","label":"name4","group": 1},
    {"id": "Child_12","label":"name3","group": 2},
    {"id": "Child_22","label":"name2","group": 2},
    {"id": "Child_32","label":"name1","group": 2},
    {"id": "Child_42","label":"name0", "group": 3}
  ],
  "links": [
    { "source": "Source","target": "Parent_12"},
    { "source": "Source","target": "Parent_22"},
    { "source": "Source","target": "Parent_32"},
    { "source": "Source","target": "Child_12"},
    { "source": "Source","target": "Child_22"},
    { "source": "Source","target": "Child_32"},
    { "source": "Child_22","target": "Child_42"}
  ]
}

Index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
.node text {
  font: 9px helvetica;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

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

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

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

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

node.append("text")
      .attr("dx", 10)
      .attr("dy", ".35em")
      .text(function(d) { return d.label })
      .style("stroke", "gray");
  node.on("click", function() {
      alert(function(d){return d.Statement})
      d3.event.stopPropagation();
  });

 node.on('mouseover', function(d){
    var nodeSelection = d3.select(this).style({opacity:'0.8'});
    nodeSelection.select("text").style({opacity:'1.0'});
})


  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

</script>

我想要的与此类似，只是我的所有节点都保存在不同的文件中：http://jsfiddle.net/simonraper/Bf5nM/?utm_source=website&utm_medium=embed&utm_campaign=Bf5nM

如果问题不清楚，请告诉我，以便我进行编辑，谢谢。

我分析了多个文件，结果是一个很大的 JSON 文件。在那个 JSON 文件中，我有节点组和 links，如您所见，我想一次代表一个组。

Answer 1

如果您想单独搜索它们，则无需将它们全部放入一个数组中。我不熟悉 d3，但像这样的简单 for 循环不会解决问题；其中 currentObject 是您要搜索的 JSON 的块：

var searchedId = document.getElementById("search").value;
for (var i=0; i<currentObject.nodes.length; i++) {
    var node = currentObject.nodes[i];
    if (node.id == searchedId) {
        // display node
    }
}

我应该如何使用搜索按钮访问大型 JSON 文件中的特定数据？

How should i access specific data from large JSON file using a search button?

javascript

json

node.js

d3.js

force-layout