javascript - 如何在角度 12 中实现 d3 js 不相交力图

Question

我尝试在这里 https://observablehq.com/@d3/force-directed-graph在角度 12 中创建这样的不相交的力图，但我找不到任何示例。我仍然设法画了一些线，但没有画出节点. 有许多链接，但左上角只有一个节点。

我使用的数据与网站上的示例相同。

import {AfterViewInit, Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import * as d3 from 'd3';

import data from './graph.json';
import {json} from "d3";

@Component({
  selector: 'app-disjoint-graph',
  templateUrl: './disjoint-graph.component.html',
  styleUrls: ['./disjoint-graph.component.scss']
})
export class DisjointGraphComponent implements OnInit{


  private links = data.links.map((d:any)=>Object.create(d))
  private nodes = data.nodes.map((d:any)=>Object.create(d))
  private margin = {top: 20, right: 20, bottom: 30, left: 50};
  private width: number;
  private height: number;
  private svg: any;

  constructor() {
    this.width = window.innerWidth - this.margin.left - this.margin.right;
    this.height = window.innerHeight - this.margin.top - this.margin.bottom;
  }

  ngOnInit(): void {
    this.buildSvg();
  }

  private buildSvg() {
    this.svg = d3.select('svg')
      .append('g')
      .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

    const simulation = d3.forceSimulation(this.nodes)
      .force("link", d3.forceLink(this.links).id((d:any) => d.id))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(this.width / 2, this.height / 2));

    const drag = simulation => {

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

      return d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended);
    }

    const link = this.svg
      .append("g")
      .attr("stroke", "#999")
      .attr("stroke-opacity", 0.6)
      .selectAll("line")
      .data(this.links)
      .join("line")
      .attr("stroke-width", d => Math.sqrt(d.value));

    const node = this.svg.append("g")
      .attr("stroke", "#fff")
      .attr("stroke-width", 1.5)
      .selectAll("circle")
      .data(this.nodes)
      .join("circle")
      .attr("r", 5)
      .attr("fill", (d) => {
        const scale = d3.scaleOrdinal(d3.schemeCategory10);
        return d => scale(d.group);
      })
      .call(drag(simulation))
      .append("title")
      .text((d:any)=>d.id)

    simulation.on("tick", () => {
      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);
    });
  }


}

谢谢您的帮助

标签： javascriptangulard3.jscharts