如何使用搜索按钮访问来自大型JSON文件的特定数据？

问题描述：

我的最终目标是使用d3，在那里我有ui-widget一个类似的搜索创建强制布局：如何使用搜索按钮访问来自大型JSON文件的特定数据？

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

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

用键/值 - >名称/ JSON的所有内容创建一个hashmap，并将其推入一个数组中。当我使用该搜索按钮进行搜索时，我将只看该键并显示该值。
重新格式化JSON以拥有所有节点和所有链接后，在2个大块中，不像我现在拥有节点/链接，节点，链接。

我有包含许多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>

我想要的是类似这样的这个大JSON，除了我所有的节点都保存在不同的文件中：http://jsfiddle.net/simonraper/Bf5nM/?utm_source=website&utm_medium=embed&utm_campaign=Bf5nM

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

我解析了多个文件，结果是一个大的JSON文件。在这个JSON文件中，我可以看到一组节点和链接，并且我想一次代表一个组。

你在寻找什么？该ID，标签或组？ – clabe45

@ clabe45我通过id搜索，与标签的id可以是相同的并不重要 –

您能详细说明吗？你有多个json文件？ – clabe45

答

如果您想单独搜索它们，则不需要将它们全部放入一个数组中。我对d3不熟悉，但不会像这样做一个简单的循环做伎俩;其中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文件的特定数据？

相关推荐