现在我正在使用 d3 显示实时数据,这里我的要求是如何在右边缘最后一个栏的末尾显示一个小圆圈,以及基于最后一个栏的数据我应该显示在顶部下面是快照
下面是我的 js fiddle :- https://jsfiddle.net/madpop143/5atLwk6h/10/
下面是我的代码
var margin = {
top: 20,
left: 20,
right: 20,
bottom: 20
};
var width = 750 - margin.left - margin.right;
var height = 750 - margin.top - margin.bottom;
var randomDate = function(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
};
var data = d3.range(1000).map(function(d) {
return {
x: randomDate(new Date(2015, 0, 1), new Date(2015, 0, 20)),
y: Math.random() * 10
};
}).sort(function(a, b) {
return a.x.getTime() - b.x.getTime();
});
var svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
var g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var x = d3.time.scale()
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
var y = d3.scale.linear()
.range([height, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
var line = d3.svg.area()
.x(function(d) {
return x(d.x);
})
.y1(function(d) {
return y(d.y);
})
.y0(y(0))
.interpolate("step-before");
g.append('path')
.attr('class', 'line')
.attr('d', line(data));
g.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
g.append('g')
.attr('class', 'y axis')
.call(yAxis);
var tick = function() {
var minMax = d3.extent(data, function(d) {
return d.x;
});
var duration = 250;
// 1 day offset
var offset = 24 * 60 * 60 * 1000;
var from = minMax[0].getTime();
// 2-days window
var timeWindow = [from, from + 2 * offset];
// Recompute x,y domains
x.domain(timeWindow);
y.domain([0, d3.max(data, function(d) {
return d.y;
})]);
// Redraw the line
g.select('.line')
.attr('d', line(data))
.attr('transform', null);
// Update x axis
g.select('.x.axis')
.transition()
.duration(duration)
.ease('linear')
.call(xAxis);
// Update y axis
g.select('.y.axis')
.transition()
.duration(duration)
.call(yAxis);
//console.log(x(from))
//console.log(x(from + offset));
//console.log(x(from + 2*offset));
// Slide the line to the left
g.select('.line')
.transition()
.duration(duration)
.ease('linear')
.attr('transform', 'translate(' + x(from - duration) + ',0)')
.each('end', function() {
tick();
});
// Remove first point
data.shift();
}
tick();
最佳答案
我创建了一个新的演示 here .
这就是它的样子:
我所做的第一个更改只是在声明 tick
函数之前创建圆圈:
g.append("circle")
.attr('class', 'last-circle')
.style("fill", "red")
.attr("r", 10)
.attr("cy", 0)
.attr("cx", 0);
然后,在 tick
函数中,在重新计算新轴域的正下方,我创建了一个新变量,它仅保存将在当前帧中显示的数据。它通过 x
值小于 timeWindow
中最大值的所有内容来过滤数据:
var newdata = data.filter(function(d) {
return d.x < timeWindow[1];
});
然后我更改了重新绘制线条的部分以使用 newdata
值,这样线条就不会绘制在图形边界/域之外:
g.select('.line')
.attr('d', line(newdata))
最后,我从 newdata
中获取了最后一个值,并将圆的位置更新为图表中最后一个值的 y 和 x 值:
var last = newdata[newdata.length - 1]
g.select('.last-circle')
.transition()
.duration(0)
.attr("cy", y(last.y))
.attr("cx", x(last.x));
关于javascript - 如何使用 D3 在最后一个栏/项目的右端设置圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61328624/