D3.Js 链接树连接不显示 [Angular]答案

【问题标题】：D3.Js Link Tree Connections Not Showing [Angular]D3.Js 链接树连接不显示 [Angular]
【发布时间】：2021-03-05 17:18:25
【问题描述】：

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

【问题讨论】：

您是否按原样使用来自 url 的 json 数据？
嗯，json 存储在我计算机上的本地文件中，但格式和对象完全相同 @NiK648
你能提供一个sn-p或沙箱吗？

标签： javascript angular d3.js graph d3-force-directed

【解决方案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

【讨论】：