使用 D3.js 实现文本自定义定位

新入门的同志可以先看上一篇引入实例，基于上一个实例引入文本，再去自己调整相关的定位数值，以此来实现自己想要的效果！楼主也是刚刚学习d3不久，有错各位评论区改正，相互学习！

1. 基础定位：使用 x 和 y 属性

在 D3.js 中，基本的文字定位可以直接通过 x 和 y 属性来设置。通常，我们可以使用以下方式在 SVG 中添加一段文字：

// 选择或创建一个 SVG 容器
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 300);

// 在指定位置添加文字
svg.append("text")
  .attr("x", 100)  // X 轴坐标
  .attr("y", 50)   // Y 轴坐标
  .text("Hello, D3!")
  .attr("font-size", "24px")
  .attr("fill", "blue");

在这个示例中，我们简单地使用 x 和 y 属性将文字定位在 (100, 50) 位置。可以根据需要调整这些数值来控制文字位置。

2. 结合数据进行动态定位

文字定位通常会与数据绑定，以实现动态生成文字的位置和内容。以下是一个例子，使用 D3.js 动态显示一组数据点的值：

const data = [30, 50, 80, 120];

// 为每个数据点创建一个圆形，并在其旁边显示数值
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", (d, i) => (i + 1) * 100)
  .attr("cy", 150)
  .attr("r", d => d / 10)
  .attr("fill", "orange");

// 添加对应的文字
svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .attr("x", (d, i) => (i + 1) * 100)
  .attr("y", 150)
  .attr("dy", "-1em") // 将文字向上偏移
  .text(d => d)
  .attr("font-size", "14px")
  .attr("fill", "black");

在这个示例中，x 属性和 y 属性的值根据数据 d 和索引 i 进行动态计算，以便让文字位置与每个圆形数据点对齐。

3. 使用 text-anchor 和 dy 控制文字位置

在 D3.js 中，我们可以使用 text-anchor 属性来设置文字的水平对齐方式，常用的值包括：

• start：默认值，从 x 坐标开始绘制文字。
• middle：将文字的中心与 x 坐标对齐。
• end：将文字的右侧与 x 坐标对齐。

同时，dy 属性可以设置文字在垂直方向上的偏移量。以下是一个例子：

svg.append("text")
  .attr("x", 200)
  .attr("y", 100)
  .attr("text-anchor", "middle")
  .attr("dy", ".35em")
  .text("Centered Text")
  .attr("font-size", "20px")
  .attr("fill", "green");

在这个例子中，我们将文字的 text-anchor 设置为 middle，使其中心与 x 坐标对齐，并通过 dy 属性将文字在垂直方向上微调。

4. 旋转和倾斜文字

有时，我们希望文字有一定的旋转效果，比如倾斜的坐标轴标签。可以使用 transform 属性来控制文字的旋转角度。以下是一个示例：

svg.append("text")
  .attr("x", 400)
  .attr("y", 200)
  .text("Rotated Text")
  .attr("font-size", "18px")
  .attr("fill", "purple")
  .attr("transform", "rotate(-45, 400, 200)"); // 旋转角度和中心点

在这里，文字以 (400, 200) 为旋转中心，逆时针旋转了 45 度。

5. 响应式定位：根据窗口或容器大小自适应

如果希望文字可以根据窗口或容器大小进行自适应定位，可以通过 getBoundingClientRect() 方法动态获取容器的大小。以下示例展示了如何实现居中对齐的文字：

// 获取容器的宽度
const svgWidth = parseInt(svg.style("width"));

// 居中对齐
svg.append("text")
  .attr("x", svgWidth / 2)
  .attr("y", 250)
  .attr("text-anchor", "middle")
  .text("Responsive Centered Text")
  .attr("font-size", "18px")
  .attr("fill", "darkblue");

通过这种方法，无论容器宽度如何变化，文字都会始终保持在水平居中的位置。

6. 添加背景和边框（可选）

有时候，为了使文字更加醒目，可以在文字后面添加背景或边框。以下示例展示了如何为文字添加背景矩形：

const text = svg.append("text")
  .attr("x", 100)
  .attr("y", 280)
  .text("Text with Background")
  .attr("font-size", "16px")
  .attr("fill", "white");

const bbox = text.node().getBBox();

svg.insert("rect", "text") // 在文字之前插入矩形
  .attr("x", bbox.x - 5)
  .attr("y", bbox.y - 5)
  .attr("width", bbox.width + 10)
  .attr("height", bbox.height + 10)
  .attr("fill", "black")
  .attr("rx", 5) // 圆角
  .attr("ry", 5);

在这个例子中，我们使用 getBBox() 方法获取文字的边界，然后绘制一个略大于文字的矩形，以此作为文字背景。

总结

以上介绍了 D3.js 中文字自定义定位的几种常用方法，包括基础的 x 和 y 定位、动态定位、text-anchor 和 dy 控制、旋转文字、响应式定位以及添加背景。