0
Как я могу выполнить этот код с интервалом в 1 секунду? Идея обновляет линейную диаграмму d3.js и перемещает (плавно) точки в оси y диаграммы.d3.js line chart - обновление значений точек
Добавить линию со случайными данными:
var randomNumber = Math.floor(Math.random() * 6) + 1;
data = [
[{'x':0,'y':0},{'x':5,'y':0},{'x':10,'y':0},{'x':15,'y':3},{'x':20,'y':7},{'x':25,'y': randomNumber}]
];
var path = svg.selectAll('.d3-line')
.data(data)
.enter()
.append("path")
.attr("d", line)
.attr("class", "d3-line d3-line-medium")
.style('stroke-width', 3)
.style('stroke', function(d,i){
return colors[i%colors.length];
});
Добавление точек линии:
// Group dots
var points = svg.selectAll('.d3-dots')
.data(data)
.enter()
.append("g")
.attr("class", "d3-dots");
// Add dots
points.selectAll('.d3-dot')
.data(function(d, index) {
var a = [];
d.forEach(function(point,i) {
a.push({'index': index, 'point': point});
});
return a;
})
.enter()
.append('circle')
.attr('class', 'd3-dot')
.attr("r", 0)
.attr("transform", function(d) {
return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
)
.style("fill", "#fff")
.style("stroke-width", 0)
.style('stroke', function(d,i){
return colors[d.index%colors.length];
})
.style("cursor", "pointer");
С уважением,
Я сделал, что вы сказали, и держать не работает. Я заменяю код и ничего! My ideia перемещает точки линии с плавным движением по оси y. line chart with line: oi68.tinypic.com/344eebm.jpg –
Вы хотите, чтобы мой весь исходный код анализировался? Извините, настойчивость, но это для работы в колледже. –
Это определенно сработает. Пожалуйста, обратите внимание на этот пример, где я придерживался такого же подхода с переходом (http://jsbin.com/baqaki/edit?js,output). – SiddP