我正在使用this jsFiddle作为模板，我注意到当我更改浏览器标签并更改回来时，图表不同步（彩色线条不移动，但x轴转移）。
当我更改浏览器标签然后更改回viz选项卡时，我可以在d3中添加什么来移动viz的线和时间轴？完整代码如下：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Live Pressure Data</title>
<style>
svg {
font: 12px sans-serif;
}
.line {
fill: none;
stroke: black;
stroke-width: 1.5px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.y.axis path {
display: none;
}
.y.axis line {
stroke: #777;
stroke-dasharray: 2px,2px;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
</style>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<!--<script src="/socket.io/socket.io.js"></script>-->
</head>
<body>
<script>
var n = 120;
var nSensors = 4;
var duration = 1000;
var now = new Date(Date.now() - duration);
// 1 x nSensors array of zeros
var count = d3.range(nSensors).map(function () {
return 0;
});
// nSensors x n array of zeros
var data = count.map(function () {
return d3.range(n).map(function () {
return 0;
});
});
var margin = { top: 20, right: 10, bottom: 20, left: 20 };
var width = 800 - margin.right - margin.left;
var height = 300 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([now - (n - 2) * duration, now - duration])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 100])
.range([height, 0]);
var line = d3.svg.line()
.interpolate("basis")
.x(function (d, i) { return x(now - (n - 1 - i) * duration); })
.y(function (d, i) { return y(d); });
var color = d3.scale.category10();
var svg = d3.select("body").append("svg")
.attr("class", "lineChart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(width)
.orient("right")
var gy = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
gy.selectAll("text")
.attr("text-anchor", "end")
.attr("x", 4)
.attr("dy", -4)
var xAxis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
var clipPath = svg.append("g")
.attr("clip-path", "url(#clip)");
var paths = clipPath.append("g")
for (var series in data) {
paths.append("path")
.attr("class", "line")
.data([data[series]])
.style("stroke", color(series))
}
// Live bar graph
var barW = 300 - margin.left - margin.right;
var barH = 190 - margin.top - margin.bottom;
var rectH = 28;
var barX = d3.scale.linear()
.domain([0, 100])
.range([0, barW]);
var barSvg = d3.select("body").append("svg")
.attr("class", "barChart")
.attr("width", barW + margin.right + margin.left)
.attr("height", barH + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
barSvg.selectAll("rect")
.data(count)
.enter().append("rect")
.attr("y", function (d, i) { return i * 38; })
.attr("width", barX)
.style("fill", function (d, i) { return color(i); })
.attr("height", rectH);
barSvg.selectAll("text")
.data(count)
.enter().append("text")
.attr("x", 50)
.attr("y", function (d, i) { return (i * 38) + 14 })
.attr("dy", "0.35em")
.attr("text-anchor", "end")
.text(function (d) { return d + " psi" })
barSvg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + barH + ")")
.call(d3.svg.axis().scale(barX).orient("bottom"))
// Live data
//var socket = io.connect('');
//socket.on('news', function (pressure) {
// oldCount = count;
// count = pressure.values;
//})
setInterval(function () {
for (var series in count) {
count[series] += (Math.random() - 0.5) * 5;
count[series] = Math.min(Math.max(count[series], 0), 100);
}
}, 900);
// Animate
tick();
function tick() {
// update the domains
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
for (var series in data) {
data[series].push(count[series]);
}
// slide the x-axis left
xAxis.transition()
.duration(duration)
.ease("linear")
.call(x.axis);
// redraw the line
svg.selectAll(".line")
.attr("d", line)
// slide the line left
paths.attr("transform", null)
.transition()
.duration(duration)
.ease("linear")
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
.each("end", tick);
// pop the old data point off the front
for (var series in data) {
data[series].shift();
}
// bar animation
barSvg.selectAll("rect")
.data(count)
.transition()
.duration(duration)
.attr("width", barX);
barSvg.selectAll("text")
.data(count)
.text(function (d) { return Math.floor(d) + " psi" })
}
</script>
</body>
</html>
答案 0 :(得分：1)
你的过渡正在互相打击。
如果您查看示例here的源代码，您会在tick函数中注意到这条奇怪的行：
function tick() {
transition = transition.each(function() {
...
根据docs：
如果未指定type，则行为与selection.each类似： 立即为中的每个元素调用指定的函数 当前转换，传入当前数据d和索引i，用 当前DOM元素的这个上下文。创建任何过渡 在transition.each的范围内将继承转换参数 来自父转换，包括id，延迟，持续时间和缓和。 因此，在transition.each中创建的转换不会中断 父转换，类似于子转换。
transition.each方法可用于链转换和应用 在一组过渡中共享时间。
[bolding mine]
将此问题应用到example，似乎可以解决您的问题。
注意，我必须更改您的paths变量。在我完成转换之后，当它包含在外部g元素中时，它不再是平滑过渡。