0
次のSVG四角形は、1秒に1回上向きに移動するSVG四角形です。 Google Chromeではうまく見えます。 Firefoxでは、正方形は約1ピクセル分右と左にシフトしますが、これは私が意図したものではありません。d3 svgトランジションはFirefox上でわずかな水平移動をします
誰でも原因を特定できますか？
このコードスニペットは簡単ではありません。これは、私が関連のないすべての側面を削除したはるかに長いファイルから行くことができるほど基本的です。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<style type='text/css'>
.hidden {
display: none;
}
#ticktock {
position: absolute;
top: 550px;
left: 400px;
}
svg rect.cell {
fill: none;
stroke: steelblue;
}
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(event) {
var L = 25;
var maxFacetCount = 8;
\t var state = {
\t \t nexttick: 0,
\t \t ticksize: 500,
\t \t n: -8,
\t \t nx: 8,
\t \t wheel: [],
nfacet: maxFacetCount,
\t \t init: true,
ticktock: true
\t };
\t function update_state(state)
\t {
if (state.ticktock)
{
if (state.wheel.length >= state.nfacet)
state.wheel.shift();
state.wheel.push({n: ++state.n });
}
\t }
state.wheel = state.wheel.slice(-1);
\t function prepare_view(state)
\t {
\t \t var width = 60 + (state.nx+0.5)*(L+2);
\t \t var height = 5 + (state.nfacet+0.5)*L;
\t \t var svg = d3.select("#wheel-container").append("svg")
\t \t \t .attr("width", width)
\t \t \t .attr("height", height);
var x1 = L*0.5+5;
\t \t var wheel = svg.append('g')
\t \t \t .attr('id','wheel')
.attr('transform','translate('+x1+',0)');
\t }
\t
\t prepare_view(state);
\t function facet_enter(facets, t)
\t {
\t \t var facet = facets.append('g');
for (var i = 0; i < state.nx; ++i)
{
facet.append('rect')
.attr('x',i*L)
.attr('y',0)
.attr('width',L)
.attr('height',L)
.attr('class','cell');
}
\t \t facet_move(facet, state.init ? null : t);
\t }
\t
\t function facet_move(facet, t)
\t { \t \t \t
\t \t (t ? facet.transition(t) : facet)
.attr('opacity',function(d,i) {
\t \t var age = state.n - d.n;
return age == 0 ? 0 : 1-age/state.nfacet; })
\t \t .attr('transform',function(d,i) { return 'translate(0,'+((d.n-state.n+state.nfacet-1)*L)+')'; });
\t }
\t
\t function facet_update(facets, t)
\t {
\t \t facet_move(facets, t);
\t }
\t function update_view(state, ticktock)
\t {
\t \t var wheel = d3.select("#wheel");
\t \t var facets = wheel.selectAll('g');
if (state.ticktock)
{
\t \t var t = d3.transition().duration(300);
\t \t var upd = facets
\t \t .data(state.wheel, function(d,i) { return d.n; });
\t \t
\t \t upd .call(facet_update, t)
\t \t .enter()
\t \t \t
\t \t \t .call(facet_enter, t)
\t \t upd.exit()
\t \t \t .transition(t)
.attr('transform','translate (0,'+(-L)+')')
\t \t \t .remove();
\t }
else
{
// tock
var t = d3.transition().duration(100);
var t2 = t.transition().duration(100);
var upd = facets
\t \t .data(state.wheel, function(d,i) { return d.n; });
\t \t
\t \t upd.call(facet_update, t)
\t \t .enter()
\t \t \t .call(facet_enter, t);
}
}
\t var tmr = d3.timer(function(elapsed) {
\t \t var do_something = false;
\t \t while (elapsed >= state.nexttick)
\t \t {
\t \t \t do_something = true;
\t \t \t state.nexttick += state.ticksize;
\t \t }
\t \t if (do_something && !(d3.select('#pause').property('checked')))
\t \t {
state.ticktock = !state.ticktock;
\t update_state(state);
\t \t \t update_view(state);
\t \t \t state.init = false;
\t \t }
\t });
});
</script>
</head>
<body>
<div id='wheel-container' ></div>
<form class="">
<input type="checkbox" id="pause" name="pause">pause</input>
</form>
<div id='ticktock' class='hidden'></div>
</body>
</html>