0
輕微不希望的水平運動下面具有每秒向上遊行一旦一些SVG正方形。在谷歌瀏覽器看起來很好。在Firefox中，廣場左右移動大約1個像素，這不是我想要的。D3 SVG過渡對火狐
誰能幫助找出原因？
對不起這個代碼片斷不是簡單;這是基本的，因爲我可以從一個更長的文件中刪除所有不相關的方面。
<!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>