D3 平移 - JavaScript

在 D3 中，平移是通过更改 SVG 图形的属性（translate）来实现的。平移允许您在 SVG 可视化中移动元素，使其向左或向右移动。这是 D3 中处理 SVG 可视化中位置的一种方法。

平移的语法

在 D3 中，平移是通过 .attr() 方法来实现的。该方法采用两个参数：

1. SVG 图形将被平移的方向（x 或 y）。
2. 要平移的距离。

以下是 D3 平移的语法：

selection.attr("transform", "translate("+ x +","+ y +")");

• selection：要平移的 SVG 图形的选择器。
• transform：要修改的 SVG 属性。
• translate：表示要进行平移操作。
• x：在 x 轴上要平移的距离。
• y：在 y 轴上要平移的距离。

平移的实例

以下示例演示了如何在 D3 中实现平移：

// 选择 SVG 元素
var svg = d3.select("svg");

// 创建圆形
var circle = svg.append("circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 20)
    .attr("fill", "red");

// 平移圆形
circle.attr("transform", "translate(50, 50)");

在上面的示例中，我们首先选择了 SVG 元素，然后创建了一个圆形，最后通过 .attr() 方法将其平移到坐标（50，50）处。

与其他 D3 方法的结合使用

平移还可以与其他 D3 方法结合使用，例如 transition() 方法和 duration() 方法：

// 选择 SVG 元素
var svg = d3.select("svg");

// 创建圆形
var circle = svg.append("circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 20)
    .attr("fill", "red");

// 平移圆形以及使用过渡效果
circle.transition()
    .duration(1000)
    .attr("transform", "translate(50, 50)");

在上面的示例中，我们选择 SVG 元素，创建了一个圆形，然后使用过渡效果和 duration() 方法将其平移到坐标（50，50）处。

总结

在 D3 中，平移允许您在 SVG 可视化中移动元素，使其向左或向右平移。使用 .attr() 方法和 transform 属性，可以很容易地实现平移。平移还可以与其他 D3 方法结合使用，例如 transition() 方法和 duration() 方法。