Question

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

问题：在Firefox中有这样的事情发生在酒吧看起来像是变成了＃34;分离的＃34;从基线开始，而不是像Chrome一样平稳运行。此外，这似乎只发生在某些条形图上，并且只有在某些方向上移动时才会发生。这是我所看到的一个超简化的视觉示例（当条形图像这样静止时，问题也适用）：https://jsfiddle.net/qbtbhhmw/1/

我一直试图一点一点地做一些事情，以找出问题何时开始，但到目前为止很难重新创建它。它可能与动画部分（小提琴发布的强制性代码）有关：

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数据以生成条形图的信息，因此可能需要一段时间才能获得问题并启动并运行。我以为我已经把我已经拍过的东西放在这里看看是否可以避免。对于业余性感到抱歉，我对整个网络开发都很陌生。

注意：我尝试使用与GPU加速相关的潜在相关CSS动画解决方案here，但添加＆＃34; translate3d（0,0,0）＆＃34;在CSS中没有帮助。

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>

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

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")

如何修复架构

完成上述所有操作后，正确的方法是将数据绑定到元素，创建用于更新布局的声明性规则，然后更改数据并进行更新。

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

/*********************************
			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>

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

1 个答案:

如何使其发挥作用

如何修复架构