トランジションの後にトランジションの一部でないトランジションを連鎖できますか？例えば

Question

私はこの

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

を行うことができますY軸ドメインを移行したい場合、私はまた同じ選択でテキストサイズを設定したいのですが、私は、テキストのサイズをアニメーション化する必要はありません。これは同じ鎖で可能ですか？だからここ

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

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

Answer 1

この遷移に対応する選択を返すメソッド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

が移行後に更新の実行例であるように今のインスタンス、

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

のために、私はちょうど2つの別々の呼び出しを使用しています、今私はなぜ知りません誰もがこの特定のフォントの変更をしたいと思うだろうが、私は何かをオフにする必要があるときにこれを使用して、移行が終了し、thenそれを再びオンにする必要があります。 D3 V4のよう

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>