Question

我正在使用Angular 10和d3 v5来构建力向图。我以https://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7为例进行尝试和学习。由于某些原因，图中的边缘不会显示。我不知道为什么吗？

 this.width = 700 - this.margin.left - this.margin.right;
    this.height = 500 - this.margin.top - this.margin.bottom;

    this.color = d3.scaleOrdinal(d3.schemeCategory10);

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


    d3.json("../assets/miserables.json")
      .then((graph) => {

        let link = this.svg.append("g")
          .attr("class", "links")
          .selectAll("line")
          .data(graph["links"])
          .enter().append("line")
          .style("stroke-width", ((d) => Math.sqrt(d.value)));

        let node = this.svg.append("g")
          .attr("class", "nodes")
          .selectAll("circle")
          .data(graph["nodes"])
          .enter().append("circle")
          .attr("r", 5)
          .attr("fill", ((d:any) => this.color(d.group)))
          .attr("fill-copied", ((d:any) => this.color(d.group)))
          .call(d3.drag()
            .on("start", (d) => dragstarted(d))
            .on("drag", (d) => dragged(d))
            .on("end", (d) => dragended(d)));

        node.append("title")
          .text(function (d) { return d.id; });

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

        this.simulation.force("link")
          .links(graph["links"]);

我确实在SVG中看到了线条和路径，但是线条仍然没有显示。不知道为什么。

Answer 1

您需要.style("stroke", "#ccc")中的link，如此处建议d3 line not drawing

如何使用d3.js和Angular在力向图中显示边缘？

1 个答案: