Geek asks and answers

D3 with an arbitrary number of rows (and a specific data format)

I'm having problems with D3, and I'm hitting my end. In fact, I have a time series chart with an arbitrary number of rows, and the source data cannot be changed for convenience at hand (but it can be controlled on the client side).

Data is formatted in this way (with an arbitrary number of labels):

object = [
{
  "_id": "2012-08-01T05:00:00",
  "value": {
    "label1": 1.1208746110529344,
    "label2": 0.00977592175310571
  }
},
{
  "_id": "2012-08-15T05:00:00",
  "value": {
    "label1": 0.7218920737863477,
    "label2": 0.6250727456677252
  },
  ....

I tried something like:

var vis = d3.select.(element)
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g");

var line = d3.svg.line()
    .x(function(data) {return x(new Date(data._id));})
    .y(function(data) {return y(data.value);});


vis.append("svg:path")
    .attr("d", line(object))
    .attr("stroke", "black");

Which, it seems, cannot access the correct value with the y accessor, because I get "error: problem analysis" and a lot of "NaNL3.384615384615385, NaNL6.76923076923077, NaNL10.153846153846155". However, if I hardcode the value of the label through something like:

.y(function(data) {return y(data.value.label1);});

It works fine, but only for one line. Can anyone offer help?

+5
2

:

var series = ["label1", "label2"].map(function(name) {
  return data.map(function(d) {
    return {date: new Date(d._id), value: d.value[name]};
  });
});

( d3.keys , , .) series . , label1, :

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344},
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477},
…

, :

var line = d3.svg.line()
    .x(function(d) {return x(d.date); })
    .y(function(d) {return y(d.value); });

:

svg.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line);
+7

parseFloat, , float, ints. , ( ), .

+1
source

More articles:


All Articles