您可以在转换后链接功能而不将其作为转换的一部分吗? [英] Can you chain a function after a transition without it being a part of the transition?

问题描述

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

For instance if I wanted to transition the yAxis domain I can do this

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

我也想在同一选择中设置文本大小，但是我不想设置文本大小的动画.在同一个链条中这可能吗?例如，

I'd also like to set the text size in the same selection, but I don't want to animate the text size. Is this possible in the same chain? For instance,

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');

现在我只用两个单独的电话

Right now I'm just using two separate calls like so

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

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

推荐答案

从D3 v4 开始，有一种方法

As of D3 v4 there is a method transition.selection() which

返回与此转换对应的选择.

Returns the selection corresponding to this transition.

通过这种方法，您可以摆脱由selection.transition()预先启动的过渡.这使得连续的方法链作用于选择而不是过渡.

By means of this method you can break free from the transition started beforehand by selection.transition(). This enables continued method chaining acting on the selection instead of the 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>

这篇关于您可以在转换后链接功能而不将其作为转换的一部分吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！