如何在 Javascript 中创建边链接和节点？

如何解决如何在 Javascript 中创建边链接和节点？

我想创建一个图表。为此，我创建了一个 JSON 文件。技能（java、python、HTML、json）应该是链接，索引（KayO、BenBeck）应该是节点。此外，节点不得低于某个最小尺寸，也不得变得太大。

之后，我希望能够通过单击节点来调出右侧的出版物列表。应突出显示可视化中当前选定的节点。

我已经从这个例子中实现了 (https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8)。但不幸的是，我不能再进一步了。

我总是得到的错误信息是：

未捕获的类型错误：无法读取未定义的属性 'json'

这是我目前的问题：

const persona = {
    "KayO": {
      firstname: "Kay",lastname: "Ohran",Birthdate: "11.09.64",Hobby: "footbal",City: "California",skills: "java,python,HTML,json",},BenBeck: {
      firstname: "Ben",lastname: "Beckamm",Birthdate: "03.95.87",Hobby: "programming",City: "New York",skills: "css,ruby,PHP,training,simulator,java,web,webgl,Borea: {
      skills: "patent,Swifts,Matlab,head-mounted-display,HMD,sql,games",firstname: "Boren",lastname: "Armin",Birthdate: "22.04.94",City: "London",BeattieH: {
      firstname: "Beattie",lastname: "Hod",Birthdate: "11.05.57",Hobby: "sleeping",City: "Texas",skills: "Oculus Rift,Unity,HCI,design,CAD,HMD",BeierDad: {
      firstname: "Beier",lastname: "Dadu",Birthdate: "18.07.54",Hobby: "nothing",City: "Berlin",skills: "design,css,simulation,manufacturing,ship design,ship building",BSzavaiEl: {
      skills:"training,power plant,immersive,head-mounted displays,unity,oculus rift,firstname: "Szaski",lastname: "El mino",Birthdate: "25.09.88",Hobby: "language learning",BellWeins: {
      skills: "speech recognition,dialog,firstname: "Bella",lastname: "Weinsetine",Birthdate: "01.01.90",Hobby: "drawing",City: "Peru",BerndtLukas: {
      firstname: "Berndt",lastname: "Lukas",Birthdate: "22.02.96",Hobby: "fitness",modelling,ship building,discarded-duplicate",Bjoernese: {
      firstname: "Bjoerne",lastname: "nessi",Birthdate: "11.09.81",Hobby: "gardening",City: "Mingguang",skills: "Swifts,touch,multi-touch,MMI,design",Blumbroll: {
      firstname: "Blum",lastname: "brolle",Birthdate: "22.06.91",Hobby: "Homebrewing",City: "Chizhou",skills: "augmented reality,json,under water,ocean,BoltRod: {
      firstname: "Bolt",lastname: "Rody",Birthdate: "05.05.89",Hobby: "DJing",City: "Nanping",speech recognition,multimodal,object interaction,BoltHerra: {
      firstname: "Bolt",lastname: "Herra",Birthdate: "22.03.98",Hobby: "Babysitting",City: "Roseau",two hands,eye tracking,sql",YinYang: {
      skills: "Swifts,techniques,firstname: "Yin",lastname: "Yang",Birthdate: "01.01.55",Hobby: "Wine tasting",City: "San Miguel",}
  };

不幸的是，我无法使用给定的 JSON 文件创建节点和链接图。这些是我的实际编码：

<!DOCTYPE html>
<head>
  <Meta charset="utf-8" />
  <title>Graph_Tutorial</title>
  <script src="persona.js"></script>
  <style>
    body {
      margin: 50px;
      font-family: Arial;
    }

    h2 {
      clear: both;
    }

    svg {
      float: left;
      border: 1px solid black;
      margin-bottom: 20px;
    }

    #detail_Box {
      float: left;
      width: 500px;
      height: 580px;
      overflow: auto;
      border: 1px solid black;
      font-size: 9pt;
      margin-left: 5px;
      padding: 10px;
      background: #eee;
    }

    circle {
      fill: #0050aa;
    }

    .links {
      opacity: 0.6;
    }
  </style>
</head>

<body>
  <p>Tutorial <i>Directed Graph</i>,self-teaching</p>
  <script src="https://d3js.org/d3.v6.js"></script>

  <svg width="800" height="600"></svg>
  <div id="detail_Box"></div>

  <script>
    const bib = persona;
    console.table(bib);

    const graph = {nodes: [{id: "a"},{id: "b"}],links: [{source: "a",target: "b"}]};

    const linkColor = d3.scaleLinear().domain([0,1]).range(["#eee","#000"]);

    const svg = d3.select("svg");
    const width = +svg.attr("width");
    const height = +svg.attr("height");

    const 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.d3.json('/',function(err,data) {
      if(error) throw error;
      var link = svg
      .append("g")
      .attr("class","links")
      .selectAll("line")
      .data(graph.links)
      .enter().append("line")
      .attr("stroke","#aaa");

    var node = svg.append("g")
      .attr("class","nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("r",5)
      .call(d3.drag().on("start",dragstarted).on("drag",dragged).on("end",dragended));

    node.append("title").text(d => d.id);

    simulation.nodes(graph.nodes).on("tick",ticked);

    simulation.force("link").links(graph.links);

    function ticked() {
      link
        .attr("x1",d => d.source.x)
        .attr("y1",d => d.source.y)
        .attr("x2",d => d.target.x)
        .attr("y2",d => d.target.y);
      node.attr("cx",d => d.x).attr("cy",d => d.y);
    }
    });

    function dragstarted(event) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      event.subject.fx = event.subject.x;
      event.subject.fy = event.subject.y;
    }

    function dragged(event) {
      event.subject.fx = event.x;
      event.subject.fy = event.y;
    }

    function dragended(event) {
      if (!event.active) simulation.alphaTarget(0);
      event.subject.fx = null;
      event.subject.fy = null;
    }

  </script>
</body>

解决方法

您的 JSON 文件应采用以下格式：

canvas.drawBitmap( bitmap,64,null);

如何在 Javascript 中创建边链接和节点？

如何解决如何在 Javascript 中创建边链接和节点？

解决方法

相关推荐