堆棧內存溢出
  簡體   English   中英

TypeError：無法讀取未定義的D3.js的屬性“1”

[英]TypeError: Cannot read property '1' of undefined D3.js

 原文  2015-12-18 15:34:35  7   1    javascript/ csv/ d3.js/ typeerror

問題描述

我想更改此示例並使用我自己的數據，只是更改了函數中的文件名 

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

我使用了與示例中相同的標題並仔細檢查了所有內容，但圖表仍未繪制。 出現此錯誤。 堆棧溢出上的其他線程無能為力 錯誤截圖

編輯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 + dy); }); 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 + dy; })]); 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記錄數據 在此輸入圖像描述

1 個解決方案

解決方案1
 9 已采納  2015-12-18 17:36:26

堆棧方法期望您的數據具有相同的長度。 每個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

然后圖表按預期繪制。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 D3.js：未捕獲的TypeError：無法讀取未定義的屬性“文檔” d3.js - 未捕獲的TypeError：無法讀取未定義的屬性“數據” Uncaught TypeError：無法讀取D3.js中未定義的屬性“曲線” 未捕獲的TypeError：無法讀取未定義的屬性“位置”（D3.JS） Uncaught TypeError：無法讀取d3.js中未定義的屬性“ length” D3.js d3.json返回未捕獲的TypeError：無法讀取未定義的屬性“ 0” d3.js Faux-3D弧-未捕獲的TypeError：無法讀取未定義的屬性“對象” 未捕獲的TypeError：無法讀取d3.js v4中未定義的屬性“ force” 將 elasticsearch 與 d3.js 集成時，“Uncaught TypeError: Cannot read property &#39;Client&#39; of undefined” 我收到此錯誤 d3.js數組問題：未捕獲的TypeError：無法讀取未定義的屬性“日期”
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM