javascript - 类型错误:无法读取未定义的 D3.js 的属性 '1'

标签 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 这也是我的代码，但它应该与示例没有任何不同

<!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>

编辑 2 记录数据 enter image description here

最佳答案

stack 方法期望您的数据具有相同的长度。每个 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 .

关于javascript - 类型错误:无法读取未定义的 D3.js 的属性 '1'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34359024/

上一篇：sql - 如何重命名由SQL INNER JOIN获得的列？

下一篇：java - Hibernate 从其他表中获取列的值

相关文章：

javascript - 如何将现有回调 API 转换为 Promise？

json - d3.js Json/数组中的标签云大小？

javascript - 过渡期间格式数字到小数点后一位？ (d3.js)

Python 3.4/请求 : Attempting to submit data and receive test file from webpage

mysql 在将数据集导出到 csv 文件时从文本字段中删除 `CR` 或 `0D`

python - 从一大组 python 列表中，找到具有最多共同元素的 2 个列表 - Python/Pandas

javascript - 如何在 d3 Javascript 图形中设置 x 轴值？

javascript - v-on 指令可以直接修改父级的 data() 属性吗？

javascript - 在没有原始模型的情况下在 EmberJS 中设置新关系

javascript - 请求的资源 : Mean stack 上不存在 'Access-Control-Allow-Origin' header

©2024 IT工具网  联系我们