如何使用搜索按鈕訪問來自大型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文件中，我可以看到一組節點和鏈接，並且我想一次代表一個組。

來源

2017-08-22 Cristi.Fatu

你在尋找什麼？該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 
    } 
}

來源

2017-08-22 15:08:02 clabe45

如何使用搜索按鈕訪問來自大型JSON文件的特定數據？

回答

相關問題