CODEWITHSUNDEEP
javascriptd3.js
Spearfisher
Spearfisher

Reputation: 8773

Error parsing d=""

I am trying to create an area chart with a simple animation: I'd like y-values of my area to go from 0 to the values in my CSV file when the page just loaded.

To do this, I created a simple transition where I change the "d" attribute of my area:

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));;

var areaLoading = d3.svg.area()
    .interpolate("basis")   
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(0); });

var areaLoaded = d3.svg.area()
    .interpolate("basis")   
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.value); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("posting_hours.csv", function(error, data) {
  data.forEach(function(d) {
    d.date = +d.date;
    d.value = +d.value;
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("path")
      .datum(data)
      .attr("class", "area")
      .attr("d", areaLoading);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);


  svg.selectAll("path")
      .transition()
      .delay(500)
      .duration(300)
      .attr("d", areaLoaded);
});

My transition works fine, everything is printed correctly but I get this error twice in the console:

Error: Problem parsing d=""

Here is a sample of my dataset:

value,date
274519,0
250313,1
233884,2
223944,3
213773,4
198681,5
186277,6
179781,7
182833,8
186396,9

What am I doing wrong?

Thanks

Upvotes: 2

Views: 1202

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The problem is the svg.selectAll("path") to update the area. This also selects the paths created by the axis components, which don't have any data bound to them. Therefore, the area generator returns an empty path, which causes the error message you're seeing.

To fix, simply include the class you have assigned in the selector: svg.selectAll("path.area"). Complete demo here.

Upvotes: 2

Related Questions