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

问题描述

我的 D3 力图显示有节点但未连接链接时遇到问题。 我不确定是什么问题，因为我的笔画已经定义。

我不确定这是 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;
    }
}

解决方法

我认为你在 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