Html D3SVG转换在Firefox上有轻微不必要的水平移动

Html D3SVG转换在Firefox上有轻微不必要的水平移动,html,d3.js,svg,Html,D3.js,Svg,下面是一些SVG方块,它们每秒向上移动一次。在谷歌浏览器中,它看起来不错。在Firefox中,方块左右移动大约1个像素,这不是我想要的 有人能帮我找出原因吗 很抱歉,这个代码片段并不简单;这是我从一个长得多的文件中删除了所有不相关的方面后所能做的最基本的工作 .hidden{ 显示:无; } #滴答声{ 位置:绝对位置; 顶部:550px; 左:400px; } svg矩形单元格{ 填充:无; 笔画:钢蓝; } document.addEventListener('DOMContentLoa

下面是一些SVG方块,它们每秒向上移动一次。在谷歌浏览器中,它看起来不错。在Firefox中,方块左右移动大约1个像素,这不是我想要的

有人能帮我找出原因吗

很抱歉,这个代码片段并不简单;这是我从一个长得多的文件中删除了所有不相关的方面后所能做的最基本的工作


.hidden{
显示:无;
}
#滴答声{
位置:绝对位置;
顶部:550px;
左:400px;
}
svg矩形单元格{
填充:无;
笔画:钢蓝;
}
document.addEventListener('DOMContentLoaded',函数(事件){
var L=25;
var MaxFaceCount=8;
变量状态={
下一个时钟:0,
尺寸:500,
n:-8,
nx:8,
轮子:[],
nfacet:MaxFaceCount,
init:是的,
滴答:没错
};
函数更新\u状态(状态)
{
if(state.ticktock)
{
如果(state.wheel.length>=state.nfacet)
state.wheel.shift();
state.wheel.push({n:++state.n});
}
}
state.wheel=state.wheel.slice(-1);
功能准备视图(状态)
{
var宽度=60+(状态nx+0.5)*(L+2);
var高度=5+(州nfacet+0.5)*L;
var svg=d3。选择(#轮子容器”)。追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度);
var x1=L*0.5+5;
var wheel=svg.append('g')
.attr('id','wheel'))
.attr('transform','translate('+x1+',0');
}
准备视图(状态);
函数facet\u enter(facets,t)
{
var facet=facets.append('g');
对于(变量i=0;i=state.nexttick)
{
做某事=真实;
state.nexttick+=state.ticksize;
}
if(do#u something&&!(d3.select('#pause').property('checked'))
{
state.ticktock=!state.ticktock;
更新_状态(state);
更新视图(状态);
state.init=false;
}
} );
});
暂停

看起来浮点舍入错误再次出现。我改为
形状渲染:crispEdges
然后在一个根元素中四舍五入到整数
translate
,这似乎修复了大部分问题(仍然有一点剩余的y轴偏移)

是:

改为:

             var x1 = Math.round(L*0.5+5);
            var wheel = svg.append('g')
                .attr('id','wheel')
                .attr('transform','translate('+x1+',0)');

.hidden{
显示:无;
}
#滴答声{
位置:绝对位置;
顶部:550px;
左:400px;
}
svg矩形单元格{
填充:无;
笔画:钢蓝;
形状渲染:边缘清晰;
}
document.addEventListener('DOMContentLoaded',函数(事件){
var L=25;
var MaxFaceCount=8;
变量状态={
下一个时钟:0,
尺寸:500,
n:-8,
nx:8,
轮子:[],
nfacet:MaxFaceCount,
init:是的,
滴答:没错
};
函数更新\u状态(状态)
{
if(state.ticktock)
{
如果(state.wheel.length>=state.nfacet)
state.wheel.shift();
state.wheel.push({n:++state.n});
}
}
state.wheel=state.wheel.slice(-1);
功能准备视图(状态)
{
var宽度=60+(状态nx+0.5)*(L+2);
var高度=5+(州nfacet+0.5)*L;
var svg=d3。选择(#轮子容器”)。追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度);
var x1=数学四舍五入(L*0.5+5);
var wheel=svg.append('g')
.attr('id','wheel'))
.attr('transform','translate('+x1+',0');
}
准备视图(状态);
函数facet\u enter(facets,t)
{
var facet=facets.append('g');
对于(变量i=0;i             var x1 = Math.round(L*0.5+5);
            var wheel = svg.append('g')
                .attr('id','wheel')
                .attr('transform','translate('+x1+',0)');