长时间潜伏,热衷于学习D3! Anywhoo,我正在研究Bostock先生的路径示例。
现在,我有一个非常有效的小提琴 - 它很平滑,快速更新,非常好地缩放x轴和y轴。
这是我试图解决的时间序列图。基本上,我将传感器整数放入JSON数组中。我的目标是实时接收这些数据;传感器发送一个临时值,我可以近乎实时地在图表上平滑地反映出这些数据。这就是问题所在。一旦我添加JSON提取代码,一切都从平滑的黄油到波涛汹涌和疯狂。这就是我与之合作的事情......请理解我是D3的新手。
这是一个很好的随机代码,以我想要的方式显示图形:
var n = 40,
duration = 750,
now = new Date(Date.now() - duration),
random = d3.random.normal(0, 0.2),
count = 0,
data = d3.range(n).map(random);
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 40
},
width = 500 - margin.left - margin.right,
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, d3.max(data)])
.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 svg = d3.select("body").append("svg")
.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 axis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
var yAx = svg.append("g")
.attr("class", "y axis")
.call(y.axis = d3.svg.axis().scale(y).orient("left"));
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(data)
.attr("class", "line");
var transition = d3.select({}).transition()
.duration(750)
.ease("linear");
tick();
function tick() {
transition = transition.each(function () {
// update the domains
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
y.domain([0, d3.max(data) + 10]);
// push a new data point onto the back
data.push(20 + Math.random() * 100);
// redraw the line, and slide it to the left
path.attr("d", line)
.attr("transform", null);
// slide the x-axis left, rescale the y-axis
axis.call(x.axis);
yAx.call(y.axis);
// slide the line left
path.transition()
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");
// pop the old data point off the front
data.shift();
}).transition().each("start", tick);
}

svg {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: orange;
stroke-width: 1.5px;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
&#13;
现在,我意识到我对过渡的不了解可能让我陷入困境。话虽这么说,我需要帮助!当我添加以下内容时,我的麻烦就开始了:
首先,我将var JSONdata = [];
添加为全局,然后在function tick() {
transition = transition.each(function () {
之后添加我的JSON代码:
d3.json("tempdata.php", function(error, data){
JSONdata = data;
data.forEach(function(d) {
JSONdata.temp = +d.temp;
})
我用最后的})
所以它有效......但它缓慢且波涛汹涌!在我的过渡中有龙有什么意思吗?我希望尽可能接近实时,但即使是缓冲延迟也可以接受最多5秒。 任何人都可以伸出援助之手吗?
我希望图表显示带有上次更新值的常量线,因此即使传感器脱机,我也会看到最后一个值。当然,最终我需要制定一个循环数据库类型的交易,实际上面临更好的时间戳处理问题。但是,这可能是另一天。
我的JSFiddle只包含随机数据:http://jsfiddle.net/6z9qe46e/7/