Question

例如，如果我想转换yAxis域，我可以这样做

this.yAxis
    .transition()
    .call(this.createYAxis)
    .attr('transform', `translate( ${this.Axes.Y.offset}, 0 )`);

我也想在相同的选择中设置文字大小，但我不想为文字大小设置动画。这可能在同一个链中吗？例如，

this.yAxis
    .transition()
    .call(this.createYAxis)
    .attr('transform', `translate( ${this.Axes.Y.offset}, 0 )`)
    //I don't want anything past this point to be a part of the transition
  .selectAll('text')
    .style('font-size', '15px');

现在我只是使用两个单独的调用

this.yAxis
    .transition()
    .call(this.createYAxis)
    .attr('transform', `translate( ${this.Axes.Y.offset}, 0 )`);

this.yAxis.selectAll( 'text')
   .style( 'font-size', '15px' )

Answer 1

截至D3 v4 ，方法transition.selection()

返回与此转换相对应的选择。

通过此方法，您可以摆脱selection.transition()之前预先启动的转换。这使得连续方法链可以作用于选择而不是转换。

var svg = d3.select("svg");

var scale = d3.scalePoint()
  .domain(["foo", "bar", "baz"])
  .range([30, 270]);

var axis = d3.axisBottom(scale);

var gX = svg.append("g")
  .transition()
    .duration(1000)
  .call(axis)
    .attr("transform", "translate(0,50)")
  .selection()   // <-- get the selection corresponding to the transition
    .style("font-size", "26px");

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

Answer 2

以下是在过渡后执行更新的示例，现在我不知道为什么有人想要在此之后发生这种特定的字体更改，但是我一直都在使用这个需要关闭一些东西，直到过渡结束，然后重新开启。

var svg = d3.select("svg"); var scale = d3.scalePoint() .domain(["foo", "bar", "baz"]) .range([30, 270]); var axis = d3.axisBottom(scale); var gX = svg.append("g") .transition() .duration(1000) .call(axis) .attr("transform", "translate(0,50)") .on('end', () => { d3.selectAll( 'text') .style( 'font-size', '15px') });

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

你可以在转换后链接一个函数而不是转换的一部分吗？

2 个答案: