D3.Js Link 树连接未显示 [Angular]

Question

我遇到问题，我的 D3 Force Graph 显示有节点但没有连接链接。我不确定是什么问题，因为我的笔画被定义了。

我不确定这是 JSON 数据格式的问题还是什么问题。问题出在哪里？

我正在将 Angular D3 与 D3.Js 一起使用，我正在尝试构建的是力导向网络图。

JSON 我正在使用的数据：

https://gist.github.com/KoryJCampbell/f18f8a11030269739eabc7de05b38b11

graph.ts

  loadForceDirectedGraph(nodes: Node[], links: Link[]) {
    const svg = d3.select('svg');
    const width = +svg.attr('width');
    const height = +svg.attr('height');

    const color = d3.scaleOrdinal(d3.schemeTableau10);


    const simulation = d3.forceSimulation()
      .force('link', d3.forceLink().id((d: Node) => d.name))// the id of the node
      .force("charge", d3.forceManyBody().strength(-5).distanceMax(0.1 * Math.min(width, height)))
      .force('center', d3.forceCenter(width / 2, height / 2));

    console.log(nodes, links);

    const link = svg.append('g')
      .attr('class', 'links')
      .selectAll('line')
      .data(links)
      .enter()
      .append('line')
      .attr('stroke-width', d => Math.sqrt(d.index))
      .attr('stroke', 'black');



    const node = svg.append('g')
      .attr('class', 'nodes')
      .selectAll('circle')
      .data(nodes)
      .enter()
      .append('circle')
      .attr('r', 5)
      .attr("fill", function(d) { return color(d.company); })
      .call(d3.drag()
        .on('start', dragStarted)
        .on('drag', dragged)
        .on('end', dragEnded)
      );


    node.append('title').text((d) => d.name);

    simulation
      .nodes(nodes)
      .on('tick', ticked);

    simulation.force<d3.ForceLink<any, any>>('link')
      .links(links);

    function ticked() {
      node
        .attr('cx', d => d.x)
        .attr('cy', d => d.y);

      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);
    }

    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;
    }
}

Answer 1

我认为 json 文件中的链接格式有误。

更改此格式的链接。

links: [
    {
      source: "<paste source's name property>",
      target: "<paste target's name property>",
      index: 0
    },
  ]

因为你在做：

 .force('link', d3.forceLink().id((d: Node) => d.name))// the name of the node

D3.Js Link 树连接未显示 [Angular]

D3.Js Link Tree Connections Not Showing [Angular]

javascript

angular

d3.js

graph

d3-force-directed