TypeError：无法读取未定义的D3.js的属性“ 1” [英] TypeError: Cannot read property '1' of undefined D3.js
本文介绍了TypeError：无法读取未定义的D3.js的属性“ 1”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想更改此
编辑1
这也是我的代码，但不应与示例不同
<！DOCTYPE html><元字符集= utf-8>< style> body {字体：10px sans-serif;}。chart {背景：#fff;} p {字体：12px helvetica;}。axis path，.axis line {fill：none ;行程：＃000；笔划宽度：2px；形状渲染：crispEdges；}按钮{位置：绝对；右：50px；顶部：10px;}< / style>< body>< script src = http://d3js.org/d3.v2.js>< / script>< div class = chart> ;< / div>< script&char; chart（ohne_postionanträge_monatlich_erst2015.csv， orange）; var datearray = []; var colorrange = [];功能图表（csvpath，color） ）{colorrange = [＃045A8D，＃2B8CBE，＃74A9CF，＃A6BDDB，＃D0D1E6，＃F1EEF6]；}否则，如果（color == pink）{colorrange = [＃980043，＃DD1C77，＃DF65B0，＃C994C7，＃D4B9DA，＃F1EEF6]；}否则，如果（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工具提示= d3.select（ body）.append（ div）.attr（ class， remove）.style（ position， absolute）。 style（ z-index， 20）.style（ visi bility， 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 +））；变量图= d3.csv（csvpath，function（data）{data.forEach（function（d）{d.date = format.parse （d.date）; d.value = + d.value;}）; var layer = stack（nest.entries（data））; x.domain（d3.extent（data，function（d）{返回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）{retur n个区域（d.values）； }）.style（ fill，function（d，i）{return z（i）;}）; svg.append（ g）.attr（ class， x轴）.attr（ transform， translate（0， + height +））.call（xAxis）; svg.append（ g）.attr（ class， y轴）.attr（ transform， translate（ + width +，0））.call（yAxis.orient（ right ））; svg.append（ g）.attr（ class， y轴）.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]; varvertedx = x.invert（mousex）; vertedx = reversed.getMonth（）+反相x.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（。laye r）.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
记录数据
解决方案
堆栈方法要求您输入数据长度相等。每个密钥必须具有相同的日期。例如，如果我们仅查看您的前三个键（国家/地区）并将数据固定为：
键，值，日期
阿富汗，1129,01 / 01/15
阿富汗，969,02 / 01/15
阿富汗，885,03 / 01/15
阿富汗，1119,04 / 01/15
阿富汗1151.55 / 01/15
阿富汗2051,06 / 01/15
阿富汗2,104,07 / 01/15
阿富汗2,270， 15年8月1日
阿富汗，2724,09 / 01/15
阿富汗，3770,10 / 01/15
阿尔巴尼，1598,01 / 01/15
阿尔巴尼， 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
波斯尼亚和黑塞哥维那，0,01 / 01/15 //<-缺少
波斯尼亚和黑塞哥维那，370,02 / 01/15
波斯尼亚和黑塞哥维那$ 380,03 / 01/15
波斯尼亚和黑塞哥维那472,04 / 01/15
波斯尼亚和黑塞哥维那382,05 / 01/15
波斯尼亚und Herzegowina，0,06 / 01/15 //< ;-这丢失了
波斯尼亚和黑塞哥维那，0,07 / 01/15 //<--这丢失了
波斯尼亚和黑塞哥维那，0,08 / 01/15 //<- -这丢失了
波斯尼亚和黑塞哥维那，0,09 / 01/15 //<--这丢失了
波斯尼亚和黑塞哥维那，0,10 / 01/15 //<-缺少
然后该图以期望。
I wanted to change this example and use my own data and just changed the file name in the function
chart("ohne_postionanträ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.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>
Edit 2 Logging data
解决方案
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.
这篇关于TypeError：无法读取未定义的D3.js的属性“ 1”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
