Usando dados aninhados com D3.js
Estou tentando exibir um belo gráfico de linhas usando D3. O problema que tenho é com o formato dos dados.
Tenho os seguintes dados (como exemplo):
var data = [
{
label: "name",
data: [[14444123, 0.012321312],
[14444123, 0.012321312],
[14444123, 0.012321312], ...]
},{
label: "another name",
data: [[14444123, 0.012321312],
[14444123, 0.012321312],
[14444123, 0.012321312], ...]
}
];
Cada entrada contém o nome e um atributo de dados com matriz de pontos (cada ponto é representado como uma matriz, onde o item [0] é x carimbo de data e hora e o item [1] é o valor
Meu problema é que ele não está funcionando corretament
Este é o código D3 que tenho até agora:
var w = options.width,
h = options.height,
p = options.padding,
x = d3.scale.linear()
.domain([0, 1])
.range([0, w]),
y = d3.scale.linear()
.domain([options.ydomainstart, options.ydomainend])
.range([h, 0]);
var vis = d3.select(options.element)
.data(data)
.append("svg:svg")
.attr("width", w + p * 2)
.attr("height", h + p * 2)
.append("svg:g");
vis.append("svg:line")
.attr("stroke", '#808080')
.attr("x1", p)
.attr("x2", p)
.attr("y1", 0)
.attr("y2", h - p);
vis.append("svg:line")
.attr("stroke", '#808080')
.attr("x1", p)
.attr("x2", w)
.attr("y1", h - p)
.attr("y2", h - p);
var rules = vis.selectAll("g.rule")
.data(data)
.enter()
.append("svg:text")
.attr("x", w - p)
.attr("y", function(d, i) { return 15 + i*12; })
.attr("text-anchor", "end")
.attr("font-size", 12)
.attr("fill", function(d, i) { return defaultColors[i % 5]; })
.text(function(d) { return d.label;});
var lines = rules.data(function(d, i) {
return d.data;
})
.append("svg:path")
.attr("stroke", function(d, i) { return defaultColors[i % 5]; })
.attr("d", d3.svg.line()
.x(function(d) {
return x(d[0]);
})
.y(function(d) {
return y(d[1]);
}));
O problema que tenho aparece nesta parte do código:
.x(function(d) {
return x(d[0]);
})
.y(function(d) {
return y(d[1]);
}));
Os dados dentro de 'd' NÃO são a matriz de pontos [x, y], mas cada valor dentro de cada matri
Significando, no primeiro item, d contém a coordenada x, no segundo item, tem a coordenada y, no terceiro item, contém a coordenada x no próximo ponto e assim por diant
É como se estivesse entrando recursivamente na matriz e, novamente, para cada valor intern
Eu não tenho ideia de como corrigir isso