javascript - TypeError: Cannot read property '1' of undefined D3.js - Stack Overflow

IT技术

更新时间：2025-03-190

admin管理员组
文章数量:1332896

I wanted to change this example and use my own data and just changed the file name in the function

chart("ohne_postionanträge_monatlich_erst2015.csv", "orange");

this is my csv file

key,value,date
Afghanistan,1129,01/01/15
Afghanistan,969,02/01/15
Afghanistan,885,03/01/15
Afghanistan,1119,04/01/15
Afghanistan,1151,05/01/15
Afghanistan,2051,06/01/15
Afghanistan,2104,07/01/15
Afghanistan,2270,08/01/15
Afghanistan,2724,09/01/15
Afghanistan,3770,10/01/15
Albanien,1598,01/01/15
Albanien,1735,02/01/15
Albanien,2955,03/01/15
Albanien,4743,04/01/15
Albanien,4864,05/01/15
Albanien,5837,06/01/15
Albanien,7547,07/01/15
Albanien,8234,08/01/15
Albanien,6624,09/01/15
Albanien,4549,10/01/15
Bosnien und Herzegowina,370,02/01/15
Bosnien und Herzegowina,380,03/01/15
Bosnien und Herzegowina,472,04/01/15
Bosnien und Herzegowina,382,05/01/15
Eritrea,620,01/01/15
Eritrea,350,02/01/15
Eritrea,306,03/01/15
Eritrea,362,04/01/15
Eritrea,612,05/01/15
Eritrea,1063,06/01/15
Eritrea,1209,07/01/15
Eritrea,978,08/01/15
Eritrea,1113,09/01/15
Eritrea,1201,10/01/15
Gesamtsumme alle HKL,21679,01/01/15
Gesamtsumme alle HKL,22775,02/01/15
Gesamtsumme alle HKL,28681,03/01/15
Gesamtsumme alle HKL,24504,04/01/15
Gesamtsumme alle HKL,23758,05/01/15
Gesamtsumme alle HKL,32705,06/01/15
Gesamtsumme alle HKL,34384,07/01/15
Gesamtsumme alle HKL,33447,08/01/15
Gesamtsumme alle HKL,40487,09/01/15
Gesamtsumme alle HKL,52730,10/01/15
Irak,901,01/01/15
Irak,835,02/01/15
Irak,1052,03/01/15
Irak,1282,04/01/15
Irak,1382,05/01/15
Irak,1975,06/01/15
Irak,1987,07/01/15
Irak,1718,08/01/15
Irak,2454,09/01/15
Irak,4047,10/01/15
Kosovo,3034,01/01/15
Kosovo,6913,02/01/15
Kosovo,11147,03/01/15
Kosovo,4319,04/01/15
Kosovo,1781,05/01/15
Kosovo,1373,06/01/15
Kosovo,1205,07/01/15
Kosovo,625,08/01/15
Kosovo,622,09/01/15
Kosovo,619,10/01/15
Mazedonien,540,01/01/15
Mazedonien,547,02/01/15
Mazedonien,744,03/01/15
Mazedonien,617,04/01/15
Mazedonien,637,05/01/15
Mazedonien,984,06/01/15
Mazedonien,1285,07/01/15
Mazedonien,882,08/01/15
Mazedonien,879,09/01/15
Mazedonien,703,10/01/15
Nigeria,455,01/01/15
Nigeria,416,02/01/15
Nigeria,268,03/01/15
Nigeria,579,05/01/15
Nigeria,656,06/01/15
Nigeria,558,07/01/15
Nigeria,476,08/01/15
Pakistan,812,06/01/15
Pakistan,666,07/01/15
Pakistan,596,08/01/15
Pakistan,1059,09/01/15
Pakistan,1000,10/01/15
Serbien,2042,01/01/15
Serbien,1871,02/01/15
Serbien,1709,03/01/15
Serbien,1462,04/01/15
Serbien,1395,05/01/15
Serbien,1404,06/01/15
Serbien,1449,07/01/15
Serbien,1371,08/01/15
Serbien,1201,09/01/15
Serbien,861,10/01/15
Somalia,396,04/01/15
"Syrien, Arabische Republik",5340,01/01/15
"Syrien, Arabische Republik",4023,02/01/15
"Syrien, Arabische Republik",4420,03/01/15
"Syrien, Arabische Republik",4224,04/01/15
"Syrien, Arabische Republik",4810,05/01/15
"Syrien, Arabische Republik",7301,06/01/15
"Syrien, Arabische Republik",9138,07/01/15
"Syrien, Arabische Republik",10112,08/01/15
"Syrien, Arabische Republik",16544,09/01/15
"Syrien, Arabische Republik",28214,10/01/15
Ungeklärt,475,01/01/15
Ungeklärt,703,09/01/15
Ungeklärt,1164,10/01/15

I used the same header as in the example and double checked everything but the graph is still not plotted. This error shows up. Other threads on stack overflow could not help

Edit 1 Here is my code also, but it should not be any different from the example

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.chart {
  background: #fff;
}

p {
  font: 12px helvetica;
}


.axis path, .axis line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

button {
  position: absolute;
  right: 50px;
  top: 10px;
}

</style>
<body>
<script src=".v2.js"></script>


<div class="chart">
</div>

<script>

chart("ohne_postionanträge_monatlich_erst2015.csv", "orange");

var datearray = [];
var colorrange = [];


function chart(csvpath, color) {

if (color == "blue") {
  colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
  colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
  colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
strokecolor = colorrange[0];

var format = d3.time.format("%m/%d/%y");

var margin = {top: 20, right: 40, bottom: 30, left: 30};
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var tooltip = d3.select("body")
    .append("div")
    .attr("class", "remove")
    .style("position", "absolute")
    .style("z-index", "20")
    .style("visibility", "hidden")
    .style("top", "30px")
    .style("left", "55px");

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

var y = d3.scale.linear()
    .range([height-10, 0]);

var z = d3.scale.ordinal()
    .range(colorrange);

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

var yAxis = d3.svg.axis()
    .scale(y);

var yAxisr = d3.svg.axis()
    .scale(y);

var stack = d3.layout.stack()
    .offset("silhouette")
    .values(function(d) { return d.values; })
    .x(function(d) { return d.date; })
    .y(function(d) { return d.value; });

var nest = d3.nest()
    .key(function(d) { return d.key; });

var area = d3.svg.area()
    .interpolate("cardinal")
    .x(function(d) { return x(d.date); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

var svg = d3.select(".chart").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 + ")");

var graph = d3.csv(csvpath, function(data) {
  data.forEach(function(d) {
    d.date = format.parse(d.date);
    d.value = +d.value;
  });

  var layers = stack(nest.entries(data));

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

  svg.selectAll(".layer")
      .data(layers)
    .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d.values); })
      .style("fill", function(d, i) { return z(i); });


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

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + width + ", 0)")
      .call(yAxis.orient("right"));

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

  svg.selectAll(".layer")
    .attr("opacity", 1)
    .on("mouseover", function(d, i) {
      svg.selectAll(".layer").transition()
      .duration(250)
      .attr("opacity", function(d, j) {
        return j != i ? 0.6 : 1;
    })})

    .on("mousemove", function(d, i) {
      mousex = d3.mouse(this);
      mousex = mousex[0];
      var invertedx = x.invert(mousex);
      invertedx = invertedx.getMonth() + invertedx.getDate();
      var selected = (d.values);
      for (var k = 0; k < selected.length; k++) {
        datearray[k] = selected[k].date
        datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
      }

      mousedate = datearray.indexOf(invertedx);
      pro = d.values[mousedate].value;

      d3.select(this)
      .classed("hover", true)
      .attr("stroke", strokecolor)
      .attr("stroke-width", "0.5px"),
      tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");

    })
    .on("mouseout", function(d, i) {
     svg.selectAll(".layer")
      .transition()
      .duration(250)
      .attr("opacity", "1");
      d3.select(this)
      .classed("hover", false)
      .attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
  })

  var vertical = d3.select(".chart")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "19")
        .style("width", "1px")
        .style("height", "380px")
        .style("top", "10px")
        .style("bottom", "30px")
        .style("left", "0px")
        .style("background", "#fff");

  d3.select(".chart")
      .on("mousemove", function(){
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px" )})
      .on("mouseover", function(){
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px")});
});
}
</script>

I wanted to change this example and use my own data and just changed the file name in the function

chart("ohne_postionanträge_monatlich_erst2015.csv", "orange");

this is my csv file

key,value,date
Afghanistan,1129,01/01/15
Afghanistan,969,02/01/15
Afghanistan,885,03/01/15
Afghanistan,1119,04/01/15
Afghanistan,1151,05/01/15
Afghanistan,2051,06/01/15
Afghanistan,2104,07/01/15
Afghanistan,2270,08/01/15
Afghanistan,2724,09/01/15
Afghanistan,3770,10/01/15
Albanien,1598,01/01/15
Albanien,1735,02/01/15
Albanien,2955,03/01/15
Albanien,4743,04/01/15
Albanien,4864,05/01/15
Albanien,5837,06/01/15
Albanien,7547,07/01/15
Albanien,8234,08/01/15
Albanien,6624,09/01/15
Albanien,4549,10/01/15
Bosnien und Herzegowina,370,02/01/15
Bosnien und Herzegowina,380,03/01/15
Bosnien und Herzegowina,472,04/01/15
Bosnien und Herzegowina,382,05/01/15
Eritrea,620,01/01/15
Eritrea,350,02/01/15
Eritrea,306,03/01/15
Eritrea,362,04/01/15
Eritrea,612,05/01/15
Eritrea,1063,06/01/15
Eritrea,1209,07/01/15
Eritrea,978,08/01/15
Eritrea,1113,09/01/15
Eritrea,1201,10/01/15
Gesamtsumme alle HKL,21679,01/01/15
Gesamtsumme alle HKL,22775,02/01/15
Gesamtsumme alle HKL,28681,03/01/15
Gesamtsumme alle HKL,24504,04/01/15
Gesamtsumme alle HKL,23758,05/01/15
Gesamtsumme alle HKL,32705,06/01/15
Gesamtsumme alle HKL,34384,07/01/15
Gesamtsumme alle HKL,33447,08/01/15
Gesamtsumme alle HKL,40487,09/01/15
Gesamtsumme alle HKL,52730,10/01/15
Irak,901,01/01/15
Irak,835,02/01/15
Irak,1052,03/01/15
Irak,1282,04/01/15
Irak,1382,05/01/15
Irak,1975,06/01/15
Irak,1987,07/01/15
Irak,1718,08/01/15
Irak,2454,09/01/15
Irak,4047,10/01/15
Kosovo,3034,01/01/15
Kosovo,6913,02/01/15
Kosovo,11147,03/01/15
Kosovo,4319,04/01/15
Kosovo,1781,05/01/15
Kosovo,1373,06/01/15
Kosovo,1205,07/01/15
Kosovo,625,08/01/15
Kosovo,622,09/01/15
Kosovo,619,10/01/15
Mazedonien,540,01/01/15
Mazedonien,547,02/01/15
Mazedonien,744,03/01/15
Mazedonien,617,04/01/15
Mazedonien,637,05/01/15
Mazedonien,984,06/01/15
Mazedonien,1285,07/01/15
Mazedonien,882,08/01/15
Mazedonien,879,09/01/15
Mazedonien,703,10/01/15
Nigeria,455,01/01/15
Nigeria,416,02/01/15
Nigeria,268,03/01/15
Nigeria,579,05/01/15
Nigeria,656,06/01/15
Nigeria,558,07/01/15
Nigeria,476,08/01/15
Pakistan,812,06/01/15
Pakistan,666,07/01/15
Pakistan,596,08/01/15
Pakistan,1059,09/01/15
Pakistan,1000,10/01/15
Serbien,2042,01/01/15
Serbien,1871,02/01/15
Serbien,1709,03/01/15
Serbien,1462,04/01/15
Serbien,1395,05/01/15
Serbien,1404,06/01/15
Serbien,1449,07/01/15
Serbien,1371,08/01/15
Serbien,1201,09/01/15
Serbien,861,10/01/15
Somalia,396,04/01/15
"Syrien, Arabische Republik",5340,01/01/15
"Syrien, Arabische Republik",4023,02/01/15
"Syrien, Arabische Republik",4420,03/01/15
"Syrien, Arabische Republik",4224,04/01/15
"Syrien, Arabische Republik",4810,05/01/15
"Syrien, Arabische Republik",7301,06/01/15
"Syrien, Arabische Republik",9138,07/01/15
"Syrien, Arabische Republik",10112,08/01/15
"Syrien, Arabische Republik",16544,09/01/15
"Syrien, Arabische Republik",28214,10/01/15
Ungeklärt,475,01/01/15
Ungeklärt,703,09/01/15
Ungeklärt,1164,10/01/15

I used the same header as in the example and double checked everything but the graph is still not plotted. This error shows up. Other threads on stack overflow could not help

Edit 1 Here is my code also, but it should not be any different from the example

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.chart {
  background: #fff;
}

p {
  font: 12px helvetica;
}


.axis path, .axis line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

button {
  position: absolute;
  right: 50px;
  top: 10px;
}

</style>
<body>
<script src="http://d3js/d3.v2.js"></script>


<div class="chart">
</div>

<script>

chart("ohne_postionanträge_monatlich_erst2015.csv", "orange");

var datearray = [];
var colorrange = [];


function chart(csvpath, color) {

if (color == "blue") {
  colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}
else if (color == "pink") {
  colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
}
else if (color == "orange") {
  colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
}
strokecolor = colorrange[0];

var format = d3.time.format("%m/%d/%y");

var margin = {top: 20, right: 40, bottom: 30, left: 30};
var width = document.body.clientWidth - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var tooltip = d3.select("body")
    .append("div")
    .attr("class", "remove")
    .style("position", "absolute")
    .style("z-index", "20")
    .style("visibility", "hidden")
    .style("top", "30px")
    .style("left", "55px");

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

var y = d3.scale.linear()
    .range([height-10, 0]);

var z = d3.scale.ordinal()
    .range(colorrange);

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

var yAxis = d3.svg.axis()
    .scale(y);

var yAxisr = d3.svg.axis()
    .scale(y);

var stack = d3.layout.stack()
    .offset("silhouette")
    .values(function(d) { return d.values; })
    .x(function(d) { return d.date; })
    .y(function(d) { return d.value; });

var nest = d3.nest()
    .key(function(d) { return d.key; });

var area = d3.svg.area()
    .interpolate("cardinal")
    .x(function(d) { return x(d.date); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

var svg = d3.select(".chart").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 + ")");

var graph = d3.csv(csvpath, function(data) {
  data.forEach(function(d) {
    d.date = format.parse(d.date);
    d.value = +d.value;
  });

  var layers = stack(nest.entries(data));

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

  svg.selectAll(".layer")
      .data(layers)
    .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d.values); })
      .style("fill", function(d, i) { return z(i); });


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

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + width + ", 0)")
      .call(yAxis.orient("right"));

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

  svg.selectAll(".layer")
    .attr("opacity", 1)
    .on("mouseover", function(d, i) {
      svg.selectAll(".layer").transition()
      .duration(250)
      .attr("opacity", function(d, j) {
        return j != i ? 0.6 : 1;
    })})

    .on("mousemove", function(d, i) {
      mousex = d3.mouse(this);
      mousex = mousex[0];
      var invertedx = x.invert(mousex);
      invertedx = invertedx.getMonth() + invertedx.getDate();
      var selected = (d.values);
      for (var k = 0; k < selected.length; k++) {
        datearray[k] = selected[k].date
        datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
      }

      mousedate = datearray.indexOf(invertedx);
      pro = d.values[mousedate].value;

      d3.select(this)
      .classed("hover", true)
      .attr("stroke", strokecolor)
      .attr("stroke-width", "0.5px"),
      tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");

    })
    .on("mouseout", function(d, i) {
     svg.selectAll(".layer")
      .transition()
      .duration(250)
      .attr("opacity", "1");
      d3.select(this)
      .classed("hover", false)
      .attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
  })

  var vertical = d3.select(".chart")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "19")
        .style("width", "1px")
        .style("height", "380px")
        .style("top", "10px")
        .style("bottom", "30px")
        .style("left", "0px")
        .style("background", "#fff");

  d3.select(".chart")
      .on("mousemove", function(){
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px" )})
      .on("mouseover", function(){
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px")});
});
}
</script>

Edit 2 Logging data

Share Improve this question edited Dec 18, 2015 at 15:55 asked Dec 18, 2015 at 15:34 basedian 3171 gold badge5 silver badges18 bronze badges

whats on line 122 on index_working.html ? – thatOneGuy Commented Dec 18, 2015 at 15:40
var layers = stack(nest.entries(data)); – basedian Commented Dec 18, 2015 at 15:41
how do you read the data in ? what is data ? – thatOneGuy Commented Dec 18, 2015 at 15:42
1 I did some editing so you can see my code too – basedian Commented Dec 18, 2015 at 15:43
i read the data with the d3.csv function and data is parsed result of this function for d3. so it can handle the entries i suppose – basedian Commented Dec 18, 2015 at 15:48

| Show 3 more ments

1 Answer 1

Sorted by: Reset to default 9

The stack method expects your data to be equally length-ed. Each key must have the same dates. For instance, if we only look at your first 3 keys (countries) and fixed the data to this:

key,value,date
Afghanistan,1129,01/01/15
Afghanistan,969,02/01/15
Afghanistan,885,03/01/15
Afghanistan,1119,04/01/15
Afghanistan,1151,05/01/15
Afghanistan,2051,06/01/15
Afghanistan,2104,07/01/15
Afghanistan,2270,08/01/15
Afghanistan,2724,09/01/15
Afghanistan,3770,10/01/15
Albanien,1598,01/01/15
Albanien,1735,02/01/15
Albanien,2955,03/01/15
Albanien,4743,04/01/15
Albanien,4864,05/01/15
Albanien,5837,06/01/15
Albanien,7547,07/01/15
Albanien,8234,08/01/15
Albanien,6624,09/01/15
Albanien,4549,10/01/15
Bosnien und Herzegowina,0,01/01/15 //<-- this was missing
Bosnien und Herzegowina,370,02/01/15
Bosnien und Herzegowina,380,03/01/15
Bosnien und Herzegowina,472,04/01/15
Bosnien und Herzegowina,382,05/01/15
Bosnien und Herzegowina,0,06/01/15 //<-- this was missing
Bosnien und Herzegowina,0,07/01/15 //<-- this was missing
Bosnien und Herzegowina,0,08/01/15 //<-- this was missing
Bosnien und Herzegowina,0,09/01/15 //<-- this was missing
Bosnien und Herzegowina,0,10/01/15 //<-- this was missing

Then the graph draws as expected.

本文标签： javascriptTypeError Cannot read property 39139 of undefined D3jsStack Overflow

版权声明：本文标题：javascript - TypeError: Cannot read property '1' of undefined D3.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742314907a2451621.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - TypeError: Cannot read property '1' of undefined D3.js - Stack Overflow

1 Answer 1

更多相关文章