该D3图没有误差，但不会产生图。为什么？

Question

我正在尝试在此处编辑该程序 htttps> htttps ：//observablehq.com/@brunolaranjeira/d3-v6-force-directed-with-with-directional-straight-arrow

我的理解是该行 simulation.on（tick ...
应该产生情节，但没有任何出现。

两个问题。为什么我看不到情节？

代码中有反击。这些没有错误，但是我在文档中找不到对它们的任何引用。有人可以解释他们做什么吗？

function env() {

  var data = {
  "links": [
    {
      "color": "red", 
      "width": 10,
      "opacity": 1, 
      "linecap": "round",
      "source": 1,
      "target": 2,
      "type": "artifact"
    }
  ],
  "nodes": [
    {       
      "id": 1,
      "style": "red",
      "opacity": 0.5,
      "radius": 1,
      "strokewidth": 1
    },
    { 
      "id": 2,
      "style": "red",
      "opacity": 0.5,
      "radius": 1,
      "strokewidth": 1
    }
  ]};

  
    
    const currLinks = data.links.map(d => Object.create(d));
    const currNodes = data.nodes.map(d => Object.create(d));
    const types = Array.from(new Set(currLinks.map(d => d.type)));
    const color = d3.scaleOrdinal(types, d3.schemeCategory10);
    console.log(currNodes)
    console.log(currLinks)

    const width = 940;
    const height = 700;
    const svg = d3.create("svg")
        .attr("viewBox", [-width / 2, -height / 2, width, height]);

    // Per-type markers, as they don't inherit styles.
    svg.append("defs").selectAll("marker")
        .data(currLinks)
        .join("marker")
        .attr("id", d => `arrow-${d}`)
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 38)
        .attr("refY", 0)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("path")
        .attr("fill", color)
        .attr("d", 'M0,-5L10,0L0,5');

    const link = svg.append("g")
        .attr("fill", "none")
        .attr("stroke-width", 1.5)
        .selectAll("path")
        .data(currLinks)
        .join("path")
        .attr("stroke", d => color(d.type))
        .attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`);

    const node = svg.append("g")
        .attr("fill", "currentColor")
        .attr("stroke-linecap", "round")
        .attr("stroke-linejoin", "round")
        .selectAll("g")
        .data(currNodes)
        .join("g");

    node.append("circle")
        .attr("stroke", "white")
        .attr("stroke-width", 1.5)
        .attr("r", 25)
        .attr('fill', d => '#6baed6');
  
    node.append("text")
        .attr("x", 30 + 4)
        .attr("y", "0.31em")
        .text(d => d.id)
        .clone(true).lower()
        .attr("fill", "none")
        .attr("stroke", "white")
        .attr("stroke-width", 3);
  
    const simulation = d3.forceSimulation(currNodes)
        .force("link", d3.forceLink(currLinks).id(d => d.id).distance(0).strength(1))
        .force("charge", d3.forceManyBody().strength(-300))
        .force("x", d3.forceX())
        .force("y", d3.forceY())
        .force('collide', d3.forceCollide(d => 65));

    node.on('dblclick', (e, d) => console.log(currNodes[d.index]));
    simulation.on("tick", () => {
          link.attr("d", d => 'M${d.source.x},${d.source.y}A0,0 0 0,1 ${d.target.x},${d.target.y}');
          node.attr("transform", d => `translate(${d.x},${d.y})`);
         });

 console.log(svg)