我可以解决它,但我不确定我是否可以通过转换以这种方式处理数据更新。我稍微改变了数据格式,现在分别绘制每一行:
http://jsfiddle.net/G5z4N/3/
var data = [
{
name: "x1",
color: "green",
data: [
[1, 0.8],
[2, 0.9],
[3, 0.9],
[5, 0.8],
[6, 0.9]
]
},
{
name: "x2",
color: "red",
data: [
[3, 1.2],
[4, 1.1],
[5, 1.1],
[6, 1.2],
[7, 1.3]
]
},
{
name: "x3",
color: "blue",
data: [
[1, 0.7],
[2, 0.7],
[3, 0.7],
[4, 0.7],
[5, 2.7],
[6, 2.6],
[7, 0.8]
]
},
];
var margin = [20, 20, 20, 20];
var w = 400 - margin[1] - margin[3];
var h = 300 - margin[0] - margin[2];
var x = d3.time.scale().range([0, w]);
var y = d3.scale.linear().range([h, 0]);
var lineFunction = d3.svg.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
graph = d3.select('#line')
.append("svg:svg")
.attr("class", "line-graph")
.attr("width", w + margin[1] + margin[3])
.attr("height", h + margin[0] + margin[2])
.append("svg:g")
.attr("transform", "translate(" + margin[3] + "," + margin[0] + ")");
x.domain([
d3.min(data, function(c) { return d3.min(c.data, function(v) { return v[0]; }); }),
d3.max(data, function(c) { return d3.max(c.data, function(v) { return v[0]; }); })
]);
y.domain([
d3.min(data, function(c) { return d3.min(c.data, function(v) { return +v[1]; }); }),
d3.max(data, function(c) { return d3.max(c.data, function(v) { return +v[1]; }); })
]);
var linesGroup = graph
.append("svg:g")
.attr("class", "lines");
var linedata;
for (var i in data) {
linedata = data[i];
linesGroup
.append("path")
.attr("d", lineFunction(linedata.data))
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", function(d, i) {
console.log(linedata.color);
return linedata.color;
});
};