-1

注意：

第一次我從單個JSON中獲取所有數據以測試輸出結果，如果json格式有效，現在我想從數組中獲取所有數據，我寫下了更多詳細信息。如何通過名稱訪問特定的數組項目並使用d3進行繪製？

我有一個數組JSON像這樣的每一個項目：

{ 
    "nodes":[ 
    {"id": "Name","group": 0}, 
    { 
      "id": "Parent", 
      "label": "Parent", 
      "group" : 1 
      }], 
"links":[{ 
     "source": "Name", 
     "target": "Parent"  
     } 
] 
    }

請記住，有更多的節點，並在陣列中的每個項目的鏈接。我想要一個包含所有JSONS名稱的下拉列表，當我選擇它們並提交時，我想要顯示該特定條目的圖形。圖/ JSON2是我從中取出所有錄音並將它們保存在一個數組中的大型.txt文件。

的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; 
} 
#Help { 
    float:right; 


    width: 25px; 
    height: 25px; 
} 
.ui-widget{ 
    float: right; 

} 


</style> 
<body> 
<svg width="960" height="600"></svg> 
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script type='text/javascript' src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.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("JSON2.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); 

    node.append("text") 
     .attr("class","nodes") 
     .text(function(d) { return d.id }) 
     .style("stroke", "gray"); 

     }) 





     .call(d3.drag() 
      .on("start", dragstarted) 
      .on("drag", dragged) 
      .on("end", dragended)); 


    node.on("click", function() { 
     alert(function(d){return d.Statement}) 
     d3.event.stopPropagation(); 
    }); 




    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> 
<div class="ui-widget"> 
<button onclick=" LoadArray()">Load</button> 
    <input list="browsers" name="browser"> 
     <datalist id="browsers"> 

     </datalist> 
     <input type="submit" > 
    <a href="https://www.google.ro/"> 
    <img id = "Help" src="Help.jpg" > 
    </a> 
</div> 
<script src="JSON2.txt"></script> 
<form> 

</form> 


<script type="text/javascript"> 
function LoadArray() { 
console.log("start"); 
for(var i = 0; i < DataArray.length; i++){ 
    console.log(i + " = " + DataArray[i]); 
} 
console.log(DataArray); 
console.log("end");} 
</script> 
<script type="text/javascript"> 

</script> 
</body>

我想從陣列獲取每個JSON和索引.The .append它的第一個標識或標籤（這是JSON的名字，第一個ID一個與group:0）在下拉列表中，當我選擇並提交圖時，應該自己繪製數組中的節點和鏈接。

來源

2017-08-24 Cristi.Fatu

如果要更新不同的JSON文件的圖形，你將需要使用一般的更新模式，例如這裏使用的一個https://shanegibney.github.io/D3 -v4-Bar-Chart-Update-Pattern/ –

@ofey謝謝你，我發現它很有幫助，仍然需要做一些挖掘 –

Bostock有一個更新數據的好例子https://bl.ocks.org/mbostock/3808234 –

-1

var ok = [{ 
 
    "nodes":[ 
 
    {"id": "Name","group": 0}, 
 
    { 
 
      "id": "Parent", 
 
      "label": "Parent", 
 
      "group" : 1 
 
      }], 
 
"links":[{ 
 
     "source": "Name", 
 
     "target": "Parent"  
 
     } 
 
] 
 
    }, 
 
{ 
 
    "nodes":[ 
 
    {"id": "Name","group": 0}, 
 
    { 
 
      "id": "Parent", 
 
      "label": "Parent", 
 
      "group" : 1 
 
      }], 
 
"links":[{ 
 
     "source": "Name", 
 
     "target": "Parent"  
 
     } 
 
] 
 
    }  
 
    ] 
 
     
 
ok.forEach(function(d,i){ 
 
//using each item 
 
d.nodes.forEach(function(d,i){ 
 
console.log(d.id) 
 
//do some thing 
 
}) 
 

 
d.links.forEach(function(d,i){ 
 
console.log(d.source) 
 
//do some thing 
 
}) 
 
//or 
 
//using the array as data 
 
//select.data(function(d,i) {return d.links}) 
 
//select.data(function(d,i) {return d.nodes}) 
 
})

來源

2017-08-25 03:41:14 KEKUATAN

謝謝，這真的很有幫助，現在我需要弄清楚如何在選項部分追加每個ID。 –

如何通過名稱訪問特定的數組項目並使用d3進行繪製？

注意：

回答

相關問題