Javascript 如何通过名称访问特定数组项搜索并使用d3绘制它？注:_Javascript_Arrays_For Loop_D3.js_Graph

Javascript 如何通过名称访问特定数组项搜索并使用d3绘制它？注:

javascript arrays for-loop d3.js graph

Javascript 如何通过名称访问特定数组项搜索并使用d3绘制它？注:,javascript,arrays,for-loop,d3.js,graph,Javascript,Arrays,For Loop,D3.js,Graph,第一次我从一个JSON获取所有数据来测试输出，如果JSON格式有效，现在我想从一个数组获取所有数据，我写下了更多细节我在数组的每个项中都有一个JSON，如下所示： { "nodes":[ {"id": "Name","group": 0}, { "id": "Parent", "label":

第一次我从一个JSON获取所有数据来测试输出，如果JSON格式有效，现在我想从一个数组获取所有数据，我写下了更多细节

我在数组的每个项中都有一个JSON，如下所示：

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

请记住，数组的每个项中都有更多的节点和链接。我希望有一个包含所有JSON名称的下拉列表，当我选择它们并提交时，我希望显示该特定条目中的图形。 graph/JSON2是一个大的.txt文件，我从中获取了所有记录并将它们保存在一个数组中

Index.html

我想从数组中获取每个JSON，并添加它的第一个id或标签。这是JSON的名称，索引中的第一个id。下拉列表中包含组：0的那个，当我选择并提交图表时，应该使用数组中的节点和链接绘制它的自身。

变量ok=[{ 节点：[ {id:Name，组：0}， { id:家长，标签：家长，组别:1 }], 链接：[{ 资料来源：姓名，目标：家长 } ] }, { 节点：[ {id:Name，组：0}， { id:家长，标签：家长，组别:1 }], 链接：[{ 资料来源：姓名，目标：家长 } ] } ] 好的，我很高兴{ //使用每个项目 d、节点。forEachfunctiond，i{ console.logd.id //做点什么 } d、链接。foreachd函数，i{ console.logd.source //做点什么 } //或 //将数组用作数据 //select.datafunctiond，i{return d.links} //select.datafunctiond，i{return d.nodes}

}如果你想为不同的json文件更新一个图形，你需要使用一个通用的更新模式，比如这里使用的@ofey Thanke you，我发现它很有用，还需要做一些挖掘Bostock有一个更新数据的很好的例子谢谢，这真的很有用，现在我需要弄清楚如何在选项部分附加每个id。

  <!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>