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

【问题标题】：How should i access specific data from large JSON file using a search button?我应该如何使用搜索按钮从大型 JSON 文件中访问特定数据？
【发布时间】：2018-01-30 22:06:59
【问题描述】：

我的最终目标是使用 d3 创建一个强制布局，其中我有一个类似这样的搜索 ui-widget：

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

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

以某种方式使用键/值 -> 名称/JSON 的所有内容创建哈希图，并将其推送到数组中。当我使用该搜索按钮进行搜索时，我将只查找键并显示值。
重新格式化 JSON 以包含所有节点和所有链接，分成 2 个大块，不像我现在拥有它们 node/link , node ,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 文件中，我有一组节点和链接，我想一次代表一个组。

【问题讨论】：

您在寻找什么？ id、标签或组？
@clabe45 我按 id 搜索，带标签的 id 可以相同没关系
您能详细说明一下吗？你有多个 json 文件？
@clabe45 是的，我现在就编辑它，没有多个 json 文件，它只是一个大文件，我正在考虑为每个组创建更多的 json 文件，但原始文件（不是这个示例）文件有 70.000 行代码 + 所以它不会那么好。
@clabe45 是的，我想将所有组存储在一个数组中，当我搜索一个组时，我只想显示那个组。像数组 [0] = 第一个节点/链接group , array[1]= 第二组的节点/链接，依此类推。

标签： javascript json node.js d3.js force-layout

【解决方案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
    }
}

【讨论】：