後続のガベージ変換のためにd3 parseSvgにエラーがありますか？

Question

視覚化でd3（バージョン4）を使用しているときにエラーが発生しました。基本的にはドキュメントを視覚化するx軸のタイムラインです。私はすべてのズーム/ブラシイベントで呼び出される主な機能を持っています。これはデータをフィルタリングして更新し、d3 enter/update/exitを使用してSVG要素を更新します。

d3をズーム/ブラッシングすると、クラッシュし、ループ内で次のエラーが表示されます。それはまたランダムに起こる。

node_modules\d3\build\node_modules\d3\build\d3.js:4250 Error: <g> attribute transform: Trailing garbage, "…41797761907139, 7.35527222388514…". 
parseSvg @ node_modules\d3\build\node_modules\d3\build\d3.js:4250 
(anonymous) @ node_modules\d3\build\node_modules\d3\build\d3.js:4299 
(anonymous) @ node_modules\d3\build\node_modules\d3\build\d3.js:8324 
tween @ node_modules\d3\build\node_modules\d3\build\d3.js:8363 
start @ node_modules\d3\build\node_modules\d3\build\d3.js:8136 
schedule @ node_modules\d3\build\node_modules\d3\build\d3.js:8085 
timerFlush @ node_modules\d3\build\node_modules\d3\build\d3.js:4949 
wake @ node_modules\d3\build\node_modules\d3\build\d3.js:4959 
requestAnimationFrame (async) 
sleep @ node_modules\d3\build\node_modules\d3\build\d3.js:4996 
nap @ node_modules\d3\build\node_modules\d3\build\d3.js:4984 
wake @ node_modules\d3\build\node_modules\d3\build\d3.js:4962 
requestAnimationFrame (async) 
.... 
requestAnimationFrame (async) 
sleep @ node_modules\d3\build\node_modules\d3\build\d3.js:4996 
nap @ node_modules\d3\build\node_modules\d3\build\d3.js:4984 
wake @ node_modules\d3\build\node_modules\d3\build\d3.js:4962 
node_modules\d3\build\node_modules\d3\build\d3.js:4251 Uncaught TypeError: Cannot read property 'matrix' of null 
    at parseSvg (node_modules\d3\build\node_modules\d3\build\d3.js:4251) 
    at node_modules\d3\build\node_modules\d3\build\d3.js:4299 
    at SVGGElement.<anonymous> (node_modules\d3\build\node_modules\d3\build\d3.js:8324) 
    at SVGGElement.tween (node_modules\d3\build\node_modules\d3\build\d3.js:8363) 
    at start (node_modules\d3\build\node_modules\d3\build\d3.js:8136) 
    at schedule (node_modules\d3\build\node_modules\d3\build\d3.js:8085) 
    at timerFlush (node_modules\d3\build\node_modules\d3\build\d3.js:4949) 
    at wake (node_modules\d3\build\node_modules\d3\build\d3.js:4959) 

SVGの解析はエラーですか？

私はHTMLを調べて、parseSvgエラーの原因がこのg要素であることを確認しました。

<g transform="translate(7.441797761907139, 7.355272223885149e-40)" style="opacity: 1; fill: rgb(255, 127, 14);"> 

最後に不具合がありますか？

e-40がtranslate()に追加されたとき、これをテストしようとしましたが、実際にはparseSvgでd3がクラッシュします。

実際には、私はすでに.toFixedを使って、描画関数の小数点以下2桁に丸めています（これも試しましたMath.round()）。それでも、まだ数字が表示されていません（2番目のスクリーンショットを参照）。

// ENTER 
var contentEnter = dataJoin.enter() 
    .append("g") 
    .style("opacity", 0) 
    .attr("transform", function(d) { 
     return "translate(" + (+d.cx).toFixed(2) + "," + (+d.cy).toFixed(2) + ")"; 
    }); 

それから/ブラッシングをズーミングする際の要素のcy位置を変えることができることに気づきました。私はそれを更新するために.transition()を使用しています。

contentEnter 
    .merge(dataJoin) 
    .transition() 
    .duration(circleTransitionDuration) 
    .style("opacity", 1) 
    .on("start", function repeat() { 
     d3.active(this).attr("transform", function(d) { 
      return "translate(" + (+d.cx).toFixed(2) + "," + (+d.cy).toFixed(2) + ")"; 
     }).style("fill", function(d) { 
      return d.color; 
     }).transition(); 
    }); 

circleTransitionDuration現在は50msであり、データや図面を更新する10ミリ秒程度かかります。

何が起こっていますか？新しいズームイベントが作成され、データの更新とd3描画が行われます。その後、アニメーションは、トランジションが完了するまでフレームごとに更新されます。遷移が完了する前に、新しいズーム/ブラシイベントが作成され、不完全なSVGが解析されるようです。

Google Chrome Profilerでイベントをログに記録しようとしました。エラーがスローされる直前に、Animation Frame Firedが同じFrameで呼び出されます。

だけ71005ms D3がクラッシュした時と最後のAnimation Frame Fired後

、永遠にエラーを表示し続けます。

エラーの原因と解決方法を教えてもらえますか？

Answer 1

私は

// UPDATE 
contentEnter 
.merge(dataJoin) 
.transition() 
.duration(circleTransitionDuration) 
.style("opacity", 1) 
.attr("transform", function(d) { 
    return "translate(" + d.cx + "," + d.cy + ")"; 
}) 
.transition(); 

に

// UPDATE 
contentEnter 
.merge(dataJoin) 
.transition() 
.duration(circleTransitionDuration) 
.style("opacity", 1) 
.on("start", function repeat() { 
    d3.active(this).attr("transform", function(d) { 
     return "translate(" + (+d.cx).toFixed(2) + "," + (+d.cy).toFixed(2) + ")"; 
    }).style("fill", function(d) { 
     return d.color; 
    }).transition(); 
}); 

からD3のライフサイクルの更新部分を変更し、今私はもうこれを再現することはできません。匿名機能が問題を引き起こしていたようだ。