如何解决尝试更新旧的D3 Wildfire映射项目，得到：未捕获的TypeError：无法读取未定义的属性“ 0”
我有一个旧的大学项目，使用D3绘制了“加利福尼亚野火”地图。我已经使用TopoJSON使用新数据更新了数据文件，但是我收到了“未捕获的TypeError：无法读取未定义的属性'0'”，它指出了topojson.min.js中的一些内容，并且下面的代码中指出了两行。
因为我要更新一个旧项目，所以我使用的是D3版本3和Topojson 1.6.19。 我曾经想到的是，我使用较新版本的Topojson处理了Geojson，但如果我改用Topjson v3，则会收到非常相似的错误。 这是我的index.html：
<!doctype html>
<html>
<head>
<title>California Wildfires</title>
<Meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="d3.slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!--
<script src="https://unpkg.com/topojson@3"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="d3.slider.js"></script>
</head>
<body>
<h1 style="text-align:center; font: 24px sans-serif; font-weight: bold; padding-left: 30px; color:#808080">
<bold>Wildfires in California,1895 - 2019</bold>
</h1>
<h4 style="text-align: center; font: 14px sans-serif;">Wildfires are a fact of life in California. With California in a massive drought,wildfires are becoming more common,larger,and more destructive in the state. This map shows the history of wildfires in California.</h4>
<script type="text/javascript" src="CA_Fires.js"></script>
<div id="slider"></div>
<br>
<div class="container">
<header>
<h3>Created by Gavin Sonne,Kaio Barbosa,and Wookjin Jang in collaboration with Suresh K Lodha,Shobhit Maheshwari,and Ryan brounley for CMPS 165 - Data Programming and Visualization</h3>
</header>
<column1>
List of Files: <br>
<ul>index.html</ul>
<ul>stylesheet.css</ul>
<ul>CA_Fires.js</ul>
<ul>caFire.json</ul>
<ul>d3.slider.css</ul>
<ul>d3.slider.js</ul>
</column1>
<column2>
List of Data Sources:
<ul><a href="http://frap.fire.ca.gov/data/frapgisdata-sw-fireperimeters_download">Fire Perimeters</a> by CAL Fire</ul>
<ul><a href="http://frap.fire.ca.gov/projects/fire_data/fire_perimeters_data_description">Fire Perimeter Database Description</a> by CAL Fire</ul>
</column2>
<column3>
List of Code Sources:
<ul><a href="https://bl.ocks.org/mbostock/5562380">California Population Density</a> by Mike Bostock</ul>
<ul><a href="http://bl.ocks.org/eesur/4e0a69d57d3bfc8a82c2">SVG to the front and back</a> by Sundar</ul>
<ul><a href="http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript">Convert String to Title Case with JavaScript</a> Stack Overflow</ul>
<ul><a href="https://github.com/MasterMaps/d3-slider">d3-slider</a> by MasterMaps</ul>
<ul><a href="http://thematicmapping.org/playground/d3/d3.slider/">D3.js Slider Examples</a></ul>
</column3>
</div>
</body>
</html>
stylesheet.css：
svg {
font: 10px sans-serif;
display:block;
margin:auto;
}
.caption {
font-weight: bold;
}
.key path {
display: none;
}
.key line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.fire {
fill: grey;
stroke-opacity: .5;
fill-opacity: .5;
}
.fire:hover {
fill: orangered;
stroke-opacity: .5;
fill-opacity: 1;
}
.state-border {
fill: none;
stroke: #000;
stroke-opacity: .4;
}
.county-border {
fill: none;
stroke: #000;
stroke-opacity: .4;
}
.tooltip {
position: absolute;
font: 16px sans-serif;
text-align: left;
font-weight: bold;
padding: 12px;
background: rgba(256,256,0.8);
color: grey;
border-radius: 2px;
left: 800px;
top: -300px;
}
tab1 { float: left}
tab2 { float: right}
div.container {
width: 100%;
}
#slider {
margin-left: auto;
margin-right: auto;
width: 1500px;
}
.yearBox {
font: 12px sans-serif;
color: black;
text-align: center;
position: element(.d3-slider-handle);
transform: translateY(-100%);
}
header {
font: 14px sans-serif;
padding: 1em;
color: black;
background-color: lightgray;
clear: left;
text-align: center;
}
column1 {
float: left;
font: 12px sans-serif;
width: 33%;
height: 100%;
/*border-right: 1px solid gray;*/
padding-top: 1em;
}
column2 {
float: left;
font: 12px sans-serif;
width: 33%;
height: 100%;
padding-top: 1em;
}
column3 {
float: left;
font: 12px sans-serif;
width: 33%;
height: 100%;
/*border-left: 1px solid gray;*/
padding-top: 1em;
}
这是我的JS代码：
var width = 645,height = 750;
var formatNumber = d3.format(",d");
var path = d3.geo.path()
.projection(d3.geo.albersUsa());
var coordinates = [0,0];
var toolscaleX = d3.scale.linear()
.domain([0,960])
.range([0,width]);
var svg = d3.select("body").append("svg")
.attr("id","svgElem")
.attr("viewBox","0,65,989,1150") //960,1300
.attr("width",width)
.attr("height",height);
var div = d3.select("body").append("div")
.attr("class","tooltip")
.style("opacity",0);
var val = document.getElementById("svgElem").getBoundingClientRect();
var svgLeft = val.left;
var svgTop = val.top;
var svgBottom = val.bottom;
var svgRight = val.right;
var viewBoxHeight = 1150;
var slider = d3.slider().min(1895).max(2019).step(1).axis(true).value([1895,2019]);
// Extend movetoFront/Back functionalities + some Bostock magick as seen on:
// http://bl.ocks.org/eesur/4e0a69d57d3bfc8a82c2
d3.selection.prototype.movetoFront = function () {
return this.each(function () {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.movetoBack = function () {
return this.each(function () {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this,firstChild);
}
});
};
d3.json("caFire.json",function (error,caFire) { ** seeing error msg here
if (error) return console.error(error);
var fires = topojson.feature(caFire,caFire.objects.ca_fires); ** and here
//console.log(fires);
//var vals = values[0].properties;
// Clip fires to land.
svg.append("defs").append("clipPath")
.attr("id","clip-land")
.append("path")
.datum(topojson.feature(caFire,caFire.objects.counties))
.attr("d",path);
// Group fires by color for faster rendering.
svg.append("g")
.attr("class","fireclip")
.attr("clip-path","url(#clip-land)")
.selectAll("path")
.data(d3.nest()
.key(function (d) {
return (d.properties.Shape_Area * 2.58999e6);
})
.entries(fires.features.filter(function (d) {
return d.properties.Shape_Area;
})))
.enter().append("path")
.attr("class","fire")
.attr("d",function (d) {
return path({
type: "FeatureCollection",features: d.values
});
})
.on("mouSEOver",function (d) {
if (this.getAttribute("hoverable") == "true") {
// display data from fire onto tooltip
d3.select(this).movetoFront(); // Brings selection to front
var t_acreage = d3.format(",f")(d.values[0].properties.GIS_ACRES);
var t_name = d.values[0].properties.FIRE_NAME.replace(/\w\S*/g,function (txt) {
return txt.charat(0).toupperCase() + txt.substr(1).toLowerCase();
});
var t_agency = d.values[0].properties.AGENCY;
t_agency = agencyCode(t_agency);
var t_unit = d.values[0].properties.UNIT_ID;
t_unit = unitCode(t_unit);
var t_cause = d.values[0].properties.CAUSE;
t_cause = causeCode(t_cause);
coordinates = d3.mouse(this);
var Y = coordinates[1];
div.style("opacity",0)
.transition().duration(400)
.style("opacity",.8)
// displays tooltip to the right of the map
.style("left",function () {
if (Y < ((viewBoxHeight + svgTop) * .28))
return svgLeft + width / 2.4 + "px";
else if (Y >= ((viewBoxHeight + svgTop) * .28) && Y <= ((viewBoxHeight + svgTop) * .65))
return ((Y / 1.5) + (width + 40)) + "px";
else if (Y > ((viewBoxHeight + svgTop) * .65))
return (svgLeft + width) + "px";
})
.style("top",function (d) {
if (Y < (viewBoxHeight + svgTop) * .85)
return (d3.event.pageY - 28) + "px"
else
return 650 + "px";
});
div.html("<tab1>Fire Name: </tab1><tab2>" + t_name + "</tab2><br>" +
"<tab1>Year:</tab1><tab2>" + d.values[0].properties.YEAR_ + "</tab2><br>" +
"<tab1>Agency: </tab1><tab2>  " + t_agency + "</tab2><br>" +
"<tab1>Adm. Unit: </tab1><tab2>  " + t_unit + "</tab2><br>" +
"<tab1>Cause: </tab1><tab2>" + t_cause + "</tab2><br>" +
"<tab1>Total Acreage: </tab1><tab2>" + t_acreage + "</tab2>")
d3.select(".tooltip").classed("hidden",false);
}
})
.on("mouSEOut",function (d) { // move selection to back to make room
d3.select(this).movetoBack()
div.style("opacity",.8)
.transition().duration(400)
.style("opacity",0);
})
.on("click",function (d) { // move selection back on click to see more
d3.select(this).movetoBack();
});
// Draw fires.
svg.append("path")
.datum(topojson.mesh(caFire,fires,function (a,b) {
return a == b
}))
.attr("d",path)
.data(topojson.feature(caFire,fires))
.attr("d",path);
// Draw state border
svg.append("path")
.datum(topojson.mesh(caFire,caFire.objects.state,function (d) {
return true;
}))
.attr("class","state-border")
.attr("d",path)
.on("mouSEOver",function (d) {
console.log(d3.event.pageX + ",")
console.log(d3.event.pageY)
});
// assign all elements (fire) to false.
svg.selectAll(".fire").attr("hoverable",true)
// Draw county borders.
svg.append("path")
.datum(topojson.mesh(caFire,caFire.objects.counties,b) {
return a !== b;
}))
.attr("class","county-border")
.attr("d",path);
// Render the slider in the div and give it functionality
d3.select('#slider').call(slider
.on("slide",function (evt,targetyear) {
d3.select("#handle-one").select(".yearBox")
.html(targetyear[0]);
d3.select("#handle-two").select(".yearBox")
.html(targetyear[1]);
svg.selectAll(".fire").each(function (d) {
if (d.values[0].properties.year > targetyear[0] && d.values[0].properties.year < targetyear[1]) {
this.setAttribute("hoverable","true");
} else {
this.setAttribute("hoverable","false");
}
this.style.fillOpacity = (d.values[0].properties.year > targetyear[0] && d.values[0].properties.year < targetyear[1]) ? .5 : 0;
})
})
)
.selectAll(".d3-slider-handle")
.append("div")
.attr("class","yearBox")
d3.select("#handle-one").select(".yearBox")
.html("1895");
d3.select("#handle-two").select(".yearBox")
.html("2019");
});
function agencyCode(a) {
switch (a) {
case "BIA":
a = "USDI Bureau of Indian Affairs"
break;
case "BLM":
a = "Bureau of Land Management"
break;
case "CAL":
a = "California Department of Forestry (CAL FIRE)"
break;
case "CCO":
a = "Contract Counties"
break;
case "DOD":
a = "Department of Defense"
break;
case "FWS":
a = "USDI Fish and Wildlife Service"
break;
case "LRA":
a = "Local Response Area"
break;
case "nop":
a = "No Protection"
break;
case "NPS":
a = "National Park Service"
break;
case "PVT":
a = "Private"
break;
case "USF":
a = "United States Forest Service"
break;
case "OTH":
a = "Other"
break;
case "CDF":
a = "California Department of Forestry (CAL FIRE)"
break;
}
return a;
}
function unitCode(a){
switch (a) {
case "AEU":
a = "Amador / El Dorado Unit"
break;
case "BDU":
a = "San Bernardino Unit"
break;
case "BEU":
a = "San Benito / Monterey Unit"
break;
case "BTU":
a = "Butte Unit"
break;
case "CZU":
a = "San Mateo / Santa Cruz Unit"
break;
case "FKU":
a = "Fresno / Kings Unit"
break;
case "HUU":
a = "Humboldt / Del norte Unit"
break;
case "LMU":
a = "Lassen / Modoc Unit"
break;
case "LNU":
a = "Sonoma / Lake / Napa Unit"
break;
case "MEU":
a = "Mendocino Unit"
break;
case "MMU":
a = "Madera / Mariposa / Merced Unit"
break;
case "MVU":
a = "San Diego Unit"
break;
case "NEU":
a = "Nevada / Yuba / Placer Unit"
break;
case "RRU":
a = "Riverside Unit"
break;
case "SCU":
a = "Santa Clara Unit"
break;
case "SHU":
a = "Shasta / Trinity Unit"
break;
case "SKU":
a = "Siskiyou Unit"
break;
case "SLU":
a = "San Luis Obispo Unit"
break;
case "TCU":
a = "Tuolumne / Calaveras Unit"
break;
case "TGU":
a = "Tehama / Glenn Unit"
break;
case "TUU":
a = "Tulare Unit"
break;
case "KRN":
a = "Kern County"
break;
case "LAC":
a = "Los Angeles County"
break;
case "MRN":
a = "Marin County"
break;
case "ORC":
a = "Orange County"
break;
case "SBC":
a = "Santa Barbara County"
break;
case "VNC":
a = "Ventura County"
break;
}
return a;
}
function causeCode(c) {
switch (c) {
case 1:
c = "Lightning"
break;
case 2:
c = "Equipment Use"
break;
case 3:
c = "Smoking"
break;
case 4:
c = "Campfire"
break;
case 5:
c = "Debris"
break;
case 6:
c = "Railroad"
break;
case 7:
c = "Arson"
break;
case 8:
c = "Playing with Fire"
break;
case 9:
c = "Miscellaneous"
break;
case 10:
c = "Vehicle"
break;
case 11:
c = "Power Line"
break;
case 12:
c = "Firefighter Training"
break;
case 13:
c = "Non-Firefighter Training"
break;
case 14:
c = "UnkNown/Unidentified"
break;
case 15:
c = "Structure"
break;
case 16:
c = "Aircraft"
break;
case 17:
c = "Volcanic"
break;
case 18:
c = "Escaped Prescribed Burn"
break;
case 19:
c = "Illegal Alien Campfire"
};
return c;
}
这也是json文件的开头（由于内容巨大（9.8 MB），因此未添加全部内容，仅添加了一些用于格式化的新行：
{"type":"Topology","bBox":[-370837.9486999996,-603282.6482999995,439170.2467,339762.54729999974],"transform":{"scale":[8.100162955629553,9.430546261462608],"translate":[-370837.9486999996,-603282.6482999995]},"objects":
{"state":{"type":"GeometryCollection","bBox":[-373976.1293066863,-604512.6495430619,539719.5856332685,450022.4913276471],"geometries":[{"type":"Multipolygon","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6]],[[7]],[[8]],[[9]],[[10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43]]]}]},"counties":{"type":"GeometryCollection","geometries":[{"type":"polygon","arcs":[[44,45,46,47,29]]},{"type":"polygon","arcs":[[48,49,50,-46,51]]},"arcs":[[17,52,53,54,55]]},"arcs":[[56,57,58,59,60]]},"arcs":[[12,61,62,63]]},"arcs":[[64,66,-52,-45,30]]},"arcs":[[67,68,69,70,-66]]},"arcs":[[71,72,73,74]]},"arcs":[[75,76,-56,77,78]]},"arcs":[[-74,-77,79]]},"arcs":[[80,-63,81,82,83,84]]},"arcs":[[85,86,87,88,89,90]]},{"type":"Multipolygon","arcs":[[[2]],[[-48,91,92,28]]]},"arcs":[[[3]],[[-93,93,94,27]],[[4]]]},"arcs":[[35,95,96,97,-69,98,99]]},"arcs":[[11,-64,-81,100,101,102]]},"arcs":[[103,-91,104,105,106]]},"arcs":[[[8]],[[107,33]]]},"arcs":[[108,109,110,111,112,113]]},"arcs":[[114,115,-88,116,117]]},"arcs":[[-116,118,119,-89]]},"arcs":[[120,121,122,123,124,125]]},"arcs":[[126,-53,127,-86,-104]]},"arcs":[[128,129,130,-96,36]]},"arcs":[[131,-102,132,133,43]]},"arcs":[[134,-112,135,136,137]]},"arcs":[[-99,-68,-65,138]]},"arcs":[[-122,139,-75,-80,-76,140]]},"arcs":[[141,-124,142,-109,143]]},"arcs":[[-108,-100,-139,32]]},"arcs":[[144,-125,-142,145,146]]},"arcs":[[-137,147,148,-129,37]]},"arcs":[[[9]],[[149,40]]]},"arcs":[[-123,-141,-79,150,-110,-143]]},"arcs":[[151,152,153,24]]},"arcs":[[-134,154,155,-147,156,157,42]]},"arcs":[[-83,158,-72,-140,-121,159]]},"arcs":[[-158,160,161,-138,-150,41]]},"arcs":[[162,-154]]},"arcs":[[-146,-144,-114,163,-161,-157]]},"arcs":[[22,-163,-153,164,-59]]},"arcs":[[-128,165,166,-117,-87]]},[[167,-61,168,-95]]]},"arcs":[[-169,-60,-165,-152,25]]},"arcs":[[-166,-58,169,170,171]]},"arcs":[[-164,-113,-135,-162]]},"arcs":[[-111,-151,-78,-55,172,173,-148,-136]]},"arcs":[[-51,174,-170,-57,-168,-94,-92,-47]]},"arcs":[[-174,175,-106,176,-130,-149]]},"arcs":[[-62,-73,-159,-82]]},"arcs":[[-131,-177,-105,-90,-120,177,-97]]},"arcs":[[-103,-132,10]]},"arcs":[[-160,-126,-145,-156,178,-84]]},"arcs":[[-54,-127,-107,-176,-173]]},"arcs":[[-118,-167,-172,179,-49,-67,-71,180]]},"arcs":[[-101,-85,-179,-155,-133]]},"arcs":[[-178,-119,-115,-181,-70,-98]]},"arcs":[[-171,-175,-50,-180]]}]},****This is where I think the problem lies (the actual file has way more objects,but you get the drift)****
"ca_fires":{"type":"GeometryCollection","arcs":[[0,1,2,3,4,5,6,7,8,9,10,43,44,48,51,55,56,60,63,64,67,71,74,75,78,79,80,84,85,90,99,102,103,106,107,108,113,114,117,120,125,126,128,131,134,137,138,140,141,143,144,146,149,151,159,162,167,171,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212],[213]],"properties":{"OBJECTID":3,"YEAR_":"2007","STATE":"CA","AGENCY":"USF","UNIT_ID":"ANF","FIRE_NAME":"RANCH","INC_NUM":"00000166","ALARM_DATE":"2007/10/20 00:00:00.000","CONT_DATE":"2007/11/15 00:00:00.000","CAUSE":2,"COMMENTS":null,"REPORT_AC":54716,"GIS_ACRES":58410.3359375,"C_METHOD":7,"OBJECTIVE":1,"FIRE_NUM":"00000166","Shape_Leng":169150.71569013828,"Shape_Area":236378245.16902018}},版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。