TypeError：无法读取属性＆＃39; 1＆＃39;未定义的D3.js

时间：2015-12-18 15:34:35

标签： javascript csv d3.js typeerror

我想更改此example并使用我自己的数据，只是更改了函数中的文件名

chart("ohne_postionanträge_monatlich_erst2015.csv", "orange");

这是我的csv文件

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

我使用了与示例中相同的标题，并仔细检查了所有内容，但图表仍未绘制。出现此错误。堆栈溢出上的其他线程无法帮助Error Screenshot

编辑1 这也是我的代码，但它不应该与示例

有任何不同

＆＃13;
＆＃13; 
<!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.org/d3.v2.js"></script>


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

<script>

chart("ohne_postionanträ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>
＆＃13;
＆＃13;
＆＃13;

编辑2 记录数据 enter image description here

1 个答案:

答案 0 :(得分：8)

堆栈方法希望您的数据具有相同的长度。每个key必须具有相同的dates。例如，如果我们只查看您的前3个键（国家/地区）并将数据修改为：

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

然后图表绘制为expected。

相关问题
最新问题