将标签放在d3.js中节点的中心

// 创建一个SVG元素
const svg = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 400);

// 创建一个力布局引擎
const simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(d => d.id))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(300, 200));

// 定义一个数据集
const data = {
    nodes: [
        { id: 0, label: "Node 0" },
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" }
    ],
    links: [
        { source: 0, target: 1 },
        { source: 1, target: 2 }
    ]
};

// 将数据加载到布局引擎中
simulation.nodes(data.nodes).on("tick", ticked);
simulation.force("link").links(data.links);

// 创建一个节点选择器
const node = svg.selectAll(".node")
    .data(data.nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .call(d3.drag()
        .on("start", dragStarted)
        .on("drag", dragged)
        .on("end", dragEnded));

// 在节点上添加一个圆形
node.append("circle")
    .attr("r", 10)
    .style("fill", "lightblue");

// 在节点上添加一个文本标签
node.append("text")
    .text(d => d.label)
    .attr("dx", 0)
    .attr("dy", 5)
    .style("text-anchor", "middle")
    .style("font-size", "12px");

// 定义一个缩放行为
const zoom = d3.zoom()
    .on("zoom", zoomed);

// 将缩放行为应用到SVG元素上
svg.call(zoom);

// 定义一个ticked函数，用于更新节点和链接的位置
function ticked() {
    node.attr("transform", d => `translate(${d.x}, ${d.y})`);
}

// 定义一个dragStarted函数，用于处理拖动开始事件
function dragStarted(event, d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
}

// 定义一个dragged函数，用于处理拖动事件
function dragged(event, d) {
    d.fx = event.x;
    d.fy = event.y;
}

// 定义一个dragEnded函数，用于处理拖动结束事件
function dragEnded(event, d) {
    if (!event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}

// 定义一个zoomed函数，用于处理缩放事件
function zoomed(event) {
    node.attr("transform", d => `translate(${d.x * event.transform.k}, ${d.y * event.transform.k})`);
}