[Vuejs]-Visualising RDF Triples using D3.js and Vue

There are a few things going on here. The major problem is that the version of d3 that the repository is using is d3 v3, while what you import in your repository is d3 v7, so the syntaxes are very different. And then the links, linkTexts, nodeTexts, etc. should be initiated before the ticked function. Then, you did mention that the dragging is not working, well that’s because you commented the line:

// .call(force.drag)

But after uncommenting that, somehow force.drag is still error, so we need to implement our own draggable (taken from this example):

    function dragstart() {
      d3.select(this).classed("fixed", true);
    }

    function clamp(x, lo, hi) {
      return x < lo ? lo : x > hi ? hi : x;
    }

    function dragged(event, d) {
      d.fx = clamp(event.x, 0, width);
      d.fy = clamp(event.y, 0, height);
      force.alpha(1).restart();
    }

    const drag = d3.drag().on("start", dragstart).on("drag", dragged);

And then we can uncomment the line I mentioned and pass the drag variable:

    var nodes = svg
      .selectAll(".node")
      .data(graph.nodes)
      .enter()
      .append("circle")
      .attr("class", "node")
      .attr("r", 8)
      .call(drag);

Finally, you can also copy-paste the CSS from the example you provided.

This is the full demo in codesandbox if you want to see it live: