如何在D3中实现元素翻转时的平滑过渡效果？

我有一个path元素，用新数据更新时能正常重新定位和翻转，但过渡效果存在问题——使用scale和translate实现翻转时，元素会先移过正确位置再返回。需要实现从初始X轴位置到新X轴位置的平滑过渡，且无偏移。

问题原因 #

当对元素应用scale(-1, 1)水平翻转时，默认变换原点是元素左上角，翻转后元素会向左偏移自身宽度的距离。原代码的translate计算未抵消这个偏移，导致过渡过程中位置出现偏差。

解决方案 #

通过设置变换原点为箭头的右端点，让翻转操作围绕该点进行，避免偏移；同时简化transform的计算逻辑，确保平移和翻转的过渡平滑同步。

步骤1：添加CSS样式设置变换原点

给箭头元素设置变换原点为右端点，确保翻转时以该点为中心，不会产生额外偏移：

.arrow {
  fill: #69b3a2;
  transform-origin: right center;
}

步骤2：修改D3.js的更新逻辑

调整updateArrow函数中的transform计算，统一使用目标X坐标作为平移值，翻转操作仅控制缩放方向：

function updateArrow(duration) {
  const midpoint = x.domain()[1] / 2

  svg.selectAll('.arrow')
    .transition()
    .duration(duration)
    .style('transform', d => {
      // 根据位置判断是否需要翻转
      const flipTransform = d.x < midpoint ? 'scale(-1, 1) ' : '';
      // 统一平移到目标X坐标，变换原点为右端点，翻转后位置仍对齐目标点
      return `${flipTransform}translate(${x(d.x)}px, ${y(d.y)}px)`;
    })
}

修改后的完整代码 #

<button id="reflect">reflect</button>
<div id="container"></div>
<style>
.arrow {
  fill: #69b3a2;
  transform-origin: right center;
}
</style>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

const width = 500;
const height = 200;

const x = d3.scaleLinear()
  .domain([0, 100])
  .range([0, width]);

const y = d3.scaleLinear()
  .domain([0, 50])
  .range([height, 0]);

const svg = d3.create("svg")
  .attr("width", width)
  .attr("height", height);

svg.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(x));

svg.append("g")
  .call(d3.axisLeft(y));

const data = [{
  x: 60,
  y: 20
}];
const reflectedData = [{
  x: 30,
  y: 20
}];

svg.selectAll('arrow')
  .data(data)
  .join('path')
  .attr('class', 'arrow')
  .attr('d', 'M0,0 L80,0 L80, 50z')

d3.select('#reflect')
  .on('click', () => {
    svg.selectAll('.arrow')
      .data(reflectedData)
    updateArrow(2000)
  })

updateArrow(0);

function updateArrow(duration) {
  const midpoint = x.domain()[1] / 2

  svg.selectAll('.arrow')
    .transition()
    .duration(duration)
    .style('transform', d => {
      const flipTransform = d.x < midpoint ? 'scale(-1, 1) ' : '';
      return `${flipTransform}translate(${x(d.x)}px, ${y(d.y)}px)`;
    })
}

container.append(svg.node());
</script>

原理说明 #

• transform-origin: right center让翻转操作以箭头的右端点为中心，翻转后箭头的右端点位置不变，仅方向向左，避免了默认原点导致的偏移。
• 统一使用x(d.x)作为平移X值，无论是否翻转，箭头的右端点都会精准对齐到数据对应的X坐标，过渡过程中位置和翻转同步进行，不会出现来回偏移的问题。

内容的提问来源于stack exchange，提问作者cplindem