javascript - 动画在 Chrome 中很流畅，但在 Firefox 中则不然

Question

我正在制作一个看起来像这样的条形图(不显示问题):https://jsfiddle.net/8ywf45s1/ .

问题:在 Firefox 中，会发生这种情况，条形图看起来像是与基线“分离”，而不是像在 Chrome 中那样平稳运行。此外，这种情况似乎只发生在某些条形上，并且仅在向某些方向移动时才会发生。这是我所看到的一个 super 简化的视觉示例(当条形图也像这样静止时，问题也适用):https://jsfiddle.net/qbtbhhmw/1/

我一直在尝试一点一点地找出问题何时开始，但到目前为止很难重现它。它可能与动画部分有关( fiddle 发布的强制代码):

d3.select("#bar" + i).transition()
    .duration(aniDuration)
    .ease(aniEase)
    .attr("y", function () {
        if (d >= 0) {
            return newTop - newHeight;
        } else {
            return newBot;
        }
    })
    .attr("height", newHeight);

其他详细信息:几乎，基线下方的一些选择栏在向上移动时会分离，同样，基线上方的一些选择栏在向下移动时也会分离。每个数据集分离的条形图有所不同，但对于该特定数据集，它们始终相同。

我不确定这些信息是否足以供任何人提供帮助。整个项目有点大，它读取 .csv 数据来生成条形图的信息，因此可能需要一段时间才能获得问题的示例并运行。我想我应该在这里尝试一下我已经拥有的东西，看看这是否可以避免。抱歉，我的业余性，总体来说我对 Web 开发还是个新手。

注意:我尝试使用与 GPU 加速相关的 CSS 动画解决方案 here ，但在 CSS 中添加“translate3d(0,0,0)”并没有帮助。

Answer 1

如何让它发挥作用

不要对单个元素进行动画处理，而是将您想要移动的所有元素放在一个组中并对其进行变换。

例如...

<svg width="300" height="400">
    <g  transform="translate(20, 180)> animate this element
        <g class="yGroups" id="yGroup1"">
            <line class="baseLines" id="baseLine1" x1="0" y1="0" x2="260" y2="0"></line>
            <text class="lineLabels" id="lineLabel1" x="-15" y="4.25">0</text>
        </g>
        <rect class="bars" id="cBarTop" x="85" width="40" y="128" height="50"></rect>
        <rect class="bars" id="cBarBot" x="150" width="40" y="182" height="50"></rect>
    </g>
</svg>

顺便说一下，你可以像这样设置多个属性...

var cBarTop = svg1.append("rect")
    .attr({
        "class": "bars",
        "id": "cBarTop",
        "x": marginX + width*0.25,
        "width": barWidth,
        "y": height/2 - barHeight - 2,
        "height": barHeight
    });
var fBarTop = svg2.append("rect")
    .attr({
        "class": "bars",
        "id": "fBarTop",
        "x": marginX + width * 0.25,
        "width": barWidth,
        "y": height / 2 - barHeight - 2,
        "height": barHeight
    });
var cBarBot = svg1.append("rect")
    .attr({
        "class": "bars",
        "id": "cBarBot",
        "x": marginX + width / 2,
        "width": barWidth,
        "y": height / 2 + 2,
        "height": barHeight
    });
var fBarBot = svg2.append("rect")
    .attr({
        "class": "bars",
        "id": "fBarBot",
        "x": marginX + width / 2,
        "width": barWidth,
        "y": height / 2 + 2,
        "height": barHeight
    });

还有一个更好的方法来做到这一点......

this.getAttribute("y")

这是……

d3.select(this).attr("y")

如何修复架构

综上所述，正确的方法是将数据绑定(bind)到元素，创建用于更新布局的声明性规则，然后更改数据并更新。

这是使用这些技术和其他一些技术的示例......

/*********************************
			DRAW STUFF
*********************************/
//SET STUFF UP
var chrome = d3.select("#chrome");
var marginX = 20;
var cheight = chrome.node().clientHeight,
    cwidth = chrome.node().clientWidth,
	width = cwidth - marginX*2,
	height = cheight - marginX*2;

var svg1 = d3.select("#chrome").append("svg")
        .attr("width", cwidth)
        .attr("height", cheight)
		// graph range
        .append("g")
		.attr("transform", "translate("+ [marginX, marginX] +")")
		// plot area
		.append("g")
        .datum([width/3, height/2])
	.attr("transform", function(d) {
        return "translate("+ d +")";
    });

var yGroup1 = svg1.append("g")
	.attr("class", "yGroups")
	.attr("id", "yGroup1")

//MAKE BASE LINES
var xRange = width/3,
	leftLine = yGroup1.append("line")
	.attr("class", "baseLines")
	.attr("id", "baseLine1")
	.attr({"x2": xRange});

//MAKE LINE LABELS
yGroup1.append("text")
	.attr("class", "lineLabels")
	.attr("id", "lineLabel1")
	.text(0)
	.attr("dx", "-1em")
	.attr("dy", "0.35em");

//MAKE BARS
var barWidth = 40;
var barHeight = 50;
var data = [{
            "id": "cBarTop", 
            "x": xRange*0.25, 
            "y": -barHeight,
    		stroke: "none"
        },{
            "id": "cBarBot",
            "x": xRange / 2,
            "y": 0,
            stroke: "none"
        }]
    var cBar = svg1.selectAll("rect").data(data);
    cBar.enter().append("rect");
    cBar.attr({
            "class": "bars", 
            "id": attr("id"), 
            "x":attr("x"), 
            "width": barWidth, 
            "y": attr("y"), 
            "height": barHeight,
        	stroke: attr("stroke")
        });

function attr(a){
    // set up a closure on a
	return function(d){return d[a]};
}

/*********************************
			ANIMATIONS
*********************************/
var aniDuration = 700;
var aniEase = "linear";

var leftButton = d3.select("#moveLeft");
var rightButton = d3.select("#moveRight");
leftButton.on("click", move(-xRange/2));
rightButton.on("click", move(xRange/2));

function move(yMove) {
	"use strict";
    // make a closure on yMove
	return function(){
        svg1.transition("linesUp")
            .duration(aniDuration)
            .ease(aniEase)
            .attr("transform", function(d) {
            	var t = d3.transform(d3.select(this).attr("transform")).translate;
                return "translate("+ [t[0] + yMove, t[1]] +")";
            });
    }
}

body { margin: 0; }
#chrome {
	position: relative;
	float: left;
	width: 640px;
	height: 150px;
	background: skyblue;
}

.baseLines {
	stroke: black;
	stroke-width: 5;
}

.bars {
	fill: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<button id="moveLeft">Move Left</button>
<button id="moveRight">Move Right</button>
    Chrome
<div id="chrome"></div>