javascript - js拓扑图怎么画？

Question

请问这种拓扑图如何画呢？纯css好实现吗？

Answer 1

我一般使用阿里的antv X6。
不过你这个要是比较简单，场景单一的话 可以考虑css画。中间的线条直接UI给你切svg就行

Answer 2

看你的需求，如果只是这个程度，那很容易，可以看下我这个视频，就是教群里的同学画这样的拓扑图：小教程：如何快速修 bug+如何开发低代码树状图。

不过更复杂的建议直接用现成的类库。

Answer 3

画拓扑有专门的组件的:

https://juejin.cn/post/6844903880854077447

如果你的拓扑图是这种固定结构的, 只是文字高亮变一下, 也可以用CSS画

Answer 4

在JavaScript中绘制拓扑图，你可以使用一些库，例如D3.js，或者使用一些专门的图形库，例如Three.js。

使用D3.js，你可以定义你的数据，然后使用D3的力导向图布局来生成图形。这个布局会自动根据你提供的数据生成节点和链接，并且你可以自定义节点的样式和链接的样式。

这是一个基本的D3力导向图的例子：

var svg = d3.select("body").append("svg")    .attr("width", width)    .attr("height", height);var simulation = d3.forceSimulation(nodes) // nodes 是你的数据    .force("link", d3.forceLink(links).id(function(d) { return d.id; }))    .force("charge", d3.forceManyBody())    .force("center", d3.forceCenter(width / 2, height / 2));var link = svg.append("g")    .attr("class", "links")    .selectAll("line")    .data(links)    .enter().append("line");var node = svg.append("g")    .attr("class", "nodes")    .selectAll("circle")    .data(nodes)    .enter().append("circle")    .attr("r", 5)    .call(d3.drag()        .on("start", dragstarted)        .on("drag", dragged)        .on("end", dragended));

纯CSS可能无法实现这样的效果，因为CSS主要用于描述文档的样式，而不是用于创建复杂的图形或动画。如果你想用纯CSS来创建拓扑图，可能需要使用一些复杂的CSS技巧，例如使用CSS的::before和::after伪元素来创建节点和链接，但这可能会非常复杂并且难以维护。