Question

如何在以下代码中在x轴上应用过渡：

// x-axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .append("text")
  .attr("class", "label")
  .attr("x", width)
  .attr("y", -6)
  .style("text-anchor", "end")
  .style("fill", "black")
  .text(xText);

添加

.transition()
.duration(100)

在添加文本时导致错误。我是D3的新手，我无法弄清楚该怎么做。

Answer 1

只需中断您的选择（并将其命名为）：

const axisGroup = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

axisGroup.append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .style("fill", "black")
      .text(xText);

那么您可以做：

axisGroup.transition()
    //etc...

解释是，如果不破坏它，整个内容将只是<text>的选择。

这是一个基本演示：

const scale = d3.scaleLinear([10, 290]);
const axis = d3.axisBottom(scale);
const svg = d3.select("svg");
const group = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);
group.append("text")
  .attr("x", 150)
  .attr("y", 40)
  .style("fill", "black")
  .text("Foo Bar Baz");
scale.domain([0, 50]);
group.transition()
  .delay(500)
  .duration(1000)
  .call(axis)

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

轴上带有附加文本的过渡

1 个答案: