D3 - 有向线性图

要解决“D3 - 有向线性图”的问题，可以按照以下步骤进行：

1. 导入D3库和相关依赖项。在HTML文件中引入D3库：

<script src="https://d3js.org/d3.v7.min.js"></script>

2. 创建一个SVG容器，用于绘制有向线性图。在HTML文件中添加一个空的SVG元素：

<svg id="chart"></svg>

3. 准备数据。有向线性图的数据应该是一个包含节点和边的数据结构。例如，可以使用以下数据结构表示一个有向线性图：

const data = {
  nodes: [
    { id: 0, name: "Node 0" },
    { id: 1, name: "Node 1" },
    { id: 2, name: "Node 2" },
    // 添加更多的节点...
  ],
  links: [
    { source: 0, target: 1 }, // 边从节点0指向节点1
    { source: 1, target: 2 }, // 边从节点1指向节点2
    // 添加更多的边...
  ]
};

4. 创建一个D3力导向图实例。使用D3的forceDirected方法创建一个力导向图实例，并设置力导向图的布局参数：

const width = 800; // 图表宽度
const height = 600; // 图表高度

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

5. 创建节点和边的绘制函数。根据数据，创建绘制节点和边的函数：

function drawNodes() {
  const nodes = d3.select("#chart")
    .selectAll(".node")
    .data(data.nodes)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .attr("fill", "blue");

  simulation.on("tick", () => {
    nodes.attr("cx", d => d.x)
      .attr("cy", d => d.y);
  });
}

function drawLinks() {
  const links = d3.select("#chart")
    .selectAll(".link")
    .data(data.links)
    .enter()
    .append("line")
    .attr("class", "link")
    .attr("stroke", "gray");

  simulation.on("tick", () => {
    links.attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);
  });
}

6. 调用绘制函数。在适当的时机，调用绘制节点和边的函数：

drawNodes();
drawLinks();

7. 样式化图表。使用CSS样式来设置节点和边的样式：

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke-width: 1.5px;
}

这样，你就可以创建一个基本的有向线性图。可以根据需要进行进一步的定制和扩展，例如添加交互效果、节点标签等。