D3 line() setting d attribute returns NaN

Question

Im pretty lost on this one. Ive gone as far as removing timeParse which does not really seem to be doing anything? (Am I misusing it?). Y is scaling correctly so it seems the data is being parsed... X however is returning blank...

What am I missing?

-- JSON --

{"data":[{"id":1,"x":"2019-01-01","y":135328287},{"id":2,"x":"2019-01-02","y":100071098},{"id":3,"x":"2019-01-03","y":171434059},{"id":4,"x":"2019-01-04","y":110975168},{"id":5,"x":"2019-01-05","y":178786923},{"id":6,"x":"2019-01-06","y":174622991},{"id":7,"x":"2019-01-07","y":90238133},{"id":8,"x":"2019-01-08","y":94038403},{"id":9,"x":"2019-01-09","y":144493248},{"id":10,"x":"2019-01-10","y":154400885},{"id":11,"x":"2019-01-11","y":118925526},{"id":12,"x":"2019-01-12","y":97099311},{"id":13,"x":"2019-01-13","y":117296138},{"id":14,"x":"2019-01-14","y":108969313},{"id":15,"x":"2019-01-15","y":129457614},{"id":16,"x":"2019-01-16","y":133212354},{"id":17,"x":"2019-01-17","y":107365954},{"id":18,"x":"2019-01-18","y":98432579},{"id":19,"x":"2019-01-19","y":161141883}...

-- JS --

d3.json("http://localhost:4000/api/line/1",
    
    function (d) {      
      return { x: d3.timeParse("%Y-%m-%d")(d.data.x), y: d.data.y }
   }).then(

      function (data) {

        var dataset = data.data;        

        const x = d3.scaleTime()
          .domain(d3.extent(dataset, d=> d.x ))
          .range([0, width]);


        svg.append("g")
          .attr("transform", `translate(0, ${height})`)
          .call(d3.axisBottom(x));

        // Add Y axis
        const y = d3.scaleLinear()
          .domain([80000000, d3.max(dataset, d=> +d.y )])
          .range([height, 0]);


        svg.append("g")
          .call(d3.axisLeft(y));

        // Add the line
        svg.append("path")
          .datum(dataset)
          .attr("fill", "none")
          .attr("stroke", "steelblue")
          .attr("stroke-width", 1.5)
          .attr("d", d3.line()
            .x(d=> x(d.x) )
            .y(d=> y(d.y) )
          )

      })

line() sets the d attr to :

MNaN,160.6996009996307LNaN,287.7010358232216 etc...

user_5768908 · Answer

The problem is, indeed, the values of the x property: since you're using a time scale, you need date objects. Your timeParse should not be removed.

However, it's not doing anything because d3.json does not accept a row function (which makes little sense for a JSON). So, a simple alternative is creating the date objects in a forEach:

dataset.forEach(d => d.x = timeParse(d.x))

Here's your code with date objects:

const data = {
  "data": [{
    "id": 1,
    "x": "2019-01-01",
    "y": 135328287
  }, {
    "id": 2,
    "x": "2019-01-02",
    "y": 100071098
  }, {
    "id": 3,
    "x": "2019-01-03",
    "y": 171434059
  }, {
    "id": 4,
    "x": "2019-01-04",
    "y": 110975168
  }, {
    "id": 5,
    "x": "2019-01-05",
    "y": 178786923
  }, {
    "id": 6,
    "x": "2019-01-06",
    "y": 174622991
  }, {
    "id": 7,
    "x": "2019-01-07",
    "y": 90238133
  }, {
    "id": 8,
    "x": "2019-01-08",
    "y": 94038403
  }, {
    "id": 9,
    "x": "2019-01-09",
    "y": 144493248
  }, {
    "id": 10,
    "x": "2019-01-10",
    "y": 154400885
  }, {
    "id": 11,
    "x": "2019-01-11",
    "y": 118925526
  }, {
    "id": 12,
    "x": "2019-01-12",
    "y": 97099311
  }, {
    "id": 13,
    "x": "2019-01-13",
    "y": 117296138
  }, {
    "id": 14,
    "x": "2019-01-14",
    "y": 108969313
  }, {
    "id": 15,
    "x": "2019-01-15",
    "y": 129457614
  }, {
    "id": 16,
    "x": "2019-01-16",
    "y": 133212354
  }, {
    "id": 17,
    "x": "2019-01-17",
    "y": 107365954
  }, {
    "id": 18,
    "x": "2019-01-18",
    "y": 98432579
  }, {
    "id": 19,
    "x": "2019-01-19",
    "y": 161141883
  }]
};

const svg = d3.select("svg");
const width = 400,
  height = 150;

const timeParse = d3.timeParse("%Y-%m-%d");

var dataset = data.data;

dataset.forEach(d => d.x = timeParse(d.x))

const x = d3.scaleTime()
  .domain(d3.extent(dataset, d => d.x))
  .range([70, width]);

svg.append("g")
  .attr("transform", `translate(0, ${height - 20})`)
  .call(d3.axisBottom(x));

// Add Y axis
const y = d3.scaleLinear()
  .domain([80000000, d3.max(dataset, d => +d.y)])
  .range([height - 20, 0]);


svg.append("g")
  .attr("transform", `translate(70,0)`)
  .call(d3.axisLeft(y));

// Add the line
svg.append("path")
  .datum(dataset)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
    .x(d => x(d.x))
    .y(d => y(d.y))
  );

D3 line() setting d attribute returns NaN

1 Answers