Я пытаюсь добавить новые точки данных в диаграмму (data2 var), но вместо добавления к строке она создает новую строку.Добавление новых записей точек данных в линейную диаграмму
http://jsfiddle.net/30c8xf9s/ любая идея?
var data = [
{date: "2-May-15", close: 50},
{date: "1-May-15", close: 50},
{date: "30-Apr-15", close: 50},
{date: "27-Apr-15", close: 60},
{date: "26-Apr-15", close: 40},
{date: "25-Apr-15", close: 35},
{date: "24-Apr-15", close: 40},
{date: "23-Apr-15", close: 30},
{date: "20-Apr-15", close: 20},
{date: "19-Apr-15", close: 15},
{date: "15-Apr-15", close: 10}
],
// i want to append this array after 3 seconds.
data2 = [
{date: "15-May-15", close: 35},
{date: "11-May-15", close: 40},
{date: "10-May-15", close: 30},
{date: "5-May-15", close: 20},
{date: "4-May-15", close: 15},
{date: "3-May-15", close: 10}
],
margin = {top: 20, right: 50, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 950 - margin.top - margin.bottom,
parseDate = d3.time.format("%d-%b-%y").parse,
bisectDate = d3.bisector(function(d) { return d.date; }).left,
formatValue = d3.format(",.2f"),
x = d3.scale.linear()
.range([0, width]),
y = d3.time.scale()
.range([height, 0]),
xAxis = d3.svg.axis()
.scale(x)
.orient("top"),
yAxis = d3.svg.axis()
.scale(y)
.orient("left"),
line = d3.svg.line()
.y(function(d) { return y(d.date); })
.x(function(d) { return x(d.close); })
.interpolate('cardinal'),
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 + ")");
test(data);
setInterval(function(){
test(data2);
}, 1000);
function test(data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
data.sort(function(a, b) {
return a.date - b.date;
});
y.domain([data[0].date, data[data.length - 1].date]);
x.domain(d3.extent(data, function(d) { return d.close; }));
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
};
Не добавляйте новый путь безоговорочно, используйте [выбор D3] (http://bost.ocks.org/mike/circles/). –