我对多线图有一个奇怪的问题。该图描绘了来自 mysql 数据库的数据,其中以 5 秒的间隔添加新行以模拟“实时”数据。当从数据库中重新提取数据时,图表会以 5 秒的间隔更新。
“流式传输”停止并开始 - 每次更新数据时都会出现 3 个错误:
Uncaught SyntaxError: Unexpected token <
d3_json
respond
数据应用于每个路径/行,如下所示:
var parameter = svg.selectAll(".parameter")
.data(data, function(d) { return d.key; })
.enter().append("g")
.attr("class", "parameter");
parameter.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.key); });
..然后更新以 5 秒为间隔读取的数据,并相应地更新和转换图表:
d3.json("LiveData.php", function(error, data)
{
color.domain(d3.keys(data[0]).filter(function(key) { return key == "testSource_id"; }));
data = data.map( function (d) {
d.testSource_id = +d.testSource_id;
d.dateTimeTaken = parseDate(d.dateTimeTaken);
d.reading = +d.reading;
d.parameterType = d.parameterType;
d.parameter_id = +d.parameter_id;
return d;
});
data = d3.nest().key(function(d) { return d.testSource_id; }).entries(data);
x.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return d.dateTimeTaken; }); }),
d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.dateTimeTaken; }); })]);
y.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return d.reading; }); }),
d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.reading; });})]);
var newparameters = svg.selectAll("g.parameter")
.data(data);
newparameters
.select( "path.line" )
.transition()
.ease("linear")
.duration(750)
.attr( "d", function(d) { return line(d.values); })
svg.select(".x.axis")
.transition()
.duration(750)
.ease("linear")
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(750)
.ease("linear")
.call(yAxis);
我不知道这是否是由我转换路径/线路的方式引起的,还是与如何从数据库中提取数据有关?任何人都可以帮忙吗?