CODEWITHSUNDEEP
arraysd3.js
vfduclos
vfduclos

Reputation: 21

slice D3 update

I have created a dynamic dropdown who enables to select a country name to see data for this country. When a country is selected a function is invoked that will update the chart with data for this country. It works well unless I select a country I have already previously selected, in which case I have the following error message:

"Uncaught TypeError: t.slice is not a function"

The dropdown is created and updated with the following code

var countryList = d3.map();
data.forEach(function(d) { 
    countryList.set(d.country,d.country); });

var select = d3.select(dropdown)
  .selectAll("option")
  .data(countryList.values().sort())
  .enter().append("option")
  .attr("value", function(d) { 
      return [d]; })
  .text(function(d) { return [d]; });

d3.selectAll("select")
  .on("change",function(){
    var selectedCountry = document.getElementById("dropdown");
    selectedCountry.options[selectedCountry.options.selectedIndex].selected = true;
    var countryName = countryList.get(this.value)
 //Calling the function countryChart
    countryChart(data,countryName);
  });

The function starts with the following code

function countryChart(data,countryName){
  dataCou=data.filter(function(d) {
    return(d.country == countryName)});

  dataCou.forEach(function(d) {
    d.monthYear = format.parse(d.monthYear);
    d.count =+ d.count;
  });

The part of the code that seems to be causing some problem is:

  dataCou.forEach(function(d) {
    d.monthYear = format.parse(d.monthYear);
    d.count =+ d.count;
  });

My data are formatted this way:

highest,monthYear,count,country
Community,2011-05-01,1116,Total
Community,2011-06-01,338,Total
Community,2011-07-01,56,Total
Community,2011-08-01,46,Total
Community,2011-09-01,52,Total
Community,2011-10-01,137,Total
Education,2011-05-01,1116,Total
Education,2011-06-01,338,Total
Education,2011-07-01,56,Total
Education,2011-08-01,46,Total
Education,2011-09-01,52,Total
Education,2011-10-01,137,Total
Community,2011-05-01,1116,USA
Community,2011-06-01,338,USA
Community,2011-07-01,56,USA
Community,2011-08-01,46,USA
Community,2011-09-01,52,USA
Community,2011-10-01,137,USA
Education,2011-05-01,1116,USA
Education,2011-06-01,338,USA
Education,2011-07-01,56,USA
Education,2011-08-01,46,USA
Education,2011-09-01,52,USA
Education,2011-10-01,137,USA

Do you have any idea what it is I am doing wrong?

Upvotes: 1

Views: 193

Answers (1)

sergeyz
sergeyz

Reputation: 1337

Your d.monthYear is the number for some reason, but must be a string.

d.monthYear = format.parse(d.monthYear); // <-- here is the problem

When I do d3.time.format("%Y-%m-%d").parse(5), I get Uncaught TypeError: t.slice is not a function(…)

But when I do d3.time.format("%Y-%m-%d").parse('2011-05-01'), I get Sun May 01 2011 00:00:00 GMT-0700 (Pacific Daylight Time)

Upvotes: 1

Related Questions