用于等值线图或热图的D3数据加载
我正在尝试使用this作为我自己的csv数据的美国等值线图（AKA热图）的示例。我复制了原始代码，只更改了数据源，然后它无法正常工作。所以我认为我的数据加载是错误的。但我无法弄清楚如何解决它。你能帮忙吗？任何帮助表示赞赏。
请参阅下面的代码或使用此JSFiddle link。好吧，我不知道如何在JSFiddle中加载我的csv数据，所以它不应该在那里工作。我将在下面分享我的csv文件。
编辑：我能想到的一个余地就是在JavaScript中添加数据，这样做效率不高，但有效。我查看原始数据格式，并模仿它。我将这个“解决方案”附在底部，如代码2所示。
代码：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.state{
fill: none;
stroke: #a9a9a9;
stroke-width: 1;
}
.state:hover{
fill-opacity:0.5;
}
#tooltip {
position: absolute;
text-align: center;
padding: 20px;
margin: 10px;
font: 12px sans-serif;
background: lightsteelblue;
border: 1px;
border-radius: 2px;
pointer-events: none;
}
#tooltip h4{
margin:0;
font-size:14px;
}
#tooltip{
background:rgba(0,0,0,0.9);
border:1px solid grey;
border-radius:5px;
font-size:12px;
width:auto;
padding:4px;
color:white;
opacity:0;
}
#tooltip table{
table-layout:fixed;
}
#tooltip tr td{
padding:0;
margin:0;
}
#tooltip tr td:nth-child(1){
width:50px;
}
#tooltip tr td:nth-child(2){
text-align:center;
}
</style>
<body>
<div id="tooltip"></div> <!-- div to hold tooltip. -->
<svg width="960" height="600" id="statesvg"></svg> <!-- svg to hold the map. -->
<script src="http://bl.ocks.org/NPashaP/raw/a74faf20b492ad377312/uStates.js"></script> <!-- creates uStates. -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function tooltipHtml(n, d){ /* function to create html content string in tooltip div. */
return "<h4>"+n+"</h4><table>"+
"<tr><td>Net</td><td>"+(d.Net)+"</td></tr>"+
"<tr><td>In</td><td>"+(d.In)+"</td></tr>"+
"<tr><td>Out</td><td>"+(d.Out)+"</td></tr>"+
"</table>";
}
var sampleData ={}; /* Sample random data. */
<!-- ["HI", "AK", "FL", "SC", "GA", "AL", "NC", "TN", "RI", "CT", "MA", "ME", "NH", "VT", "NY", "NJ", "PA", "DE", "MD", -->
<!-- "WV", "KY", "OH", "MI", "WY", "MT", "ID", "WA", "DC", "TX", "CA", "AZ", "NV", "UT", "CO", "NM", "OR", "ND", "SD", -->
<!-- "NE", "IA", "MS", "IN", "IL", "MN", "WI", "MO", "AR", "OK", "KS", "LS", "VA"] -->
<!-- .forEach(function(d){ -->
<!-- var Net=Math.round(100*Math.random()), -->
<!-- In=Math.round(100*Math.random()), -->
<!-- Out=Math.round(100*Math.random()); -->
<!-- sampleData[d]={ -->
<!-- Net:d3.min([Net,In,Out]), -->
<!-- In:d3.max([Net,In,Out]), -->
<!-- Out:Math.round((Net+In+Out)/3), -->
<!-- color:d3.interpolate("#ffffcc", "#800026")(Net/100)}; -->
<!-- }); -->
sampleData = d3.csv("Test.csv", function(data){
data.forEach(function(d) {
State: d.State,
Net: +d.Net,
In: +d.In,
Out: +d.Out,
color: d3.interpolate("#ffffcc", "#800026")(Net/100)};
});
console.log(data[0]);
});
/* draw states on id #statesvg */
uStates.draw("#statesvg", sampleData, tooltipHtml);
d3.select(self.frameElement).style("height", "600px");
</script>
</body>
CSV文件：
State,Net,In,Out
"""AK""",12215,53952,41737
"""AL""",16443,35063,18620
"""AR""",62902,75160,12258
"""AZ""",13931,77911,63980
"""CA""",94043,98042,3999
"""CO""",59769,93780,34011
"""CT""",-14958,24957,39915
"""DC""",29903,86390,56487
"""DE""",-65779,16257,82036
"""FL""",-51446,34313,85759
"""GA""",29685,37768,8083
"""IA""",-42416,56750,99166
"""ID""",-32028,41536,73564
"""IL""",-86579,8818,95397
"""IN""",-38841,9576,48417
"""KS""",-20601,36955,57556
"""KY""",-1593,37728,39321
"""LS""",-2574,34066,36640
"""MA""",-47842,34838,82680
"""MD""",-46721,9290,56011
"""ME""",-65431,21563,86994
"""MI""",-6542,53094,59636
"""MN""",-6034,76869,82903
"""MO""",-73558,20641,94199
"""MS""",24958,87012,62054
"""MT""",28657,75139,46482
"""NC""",56536,79399,22863
"""ND""",27423,61184,33761
"""NE""",-32070,22564,54634
"""NH""",-60000,21133,81133
"""NJ""",-45478,45954,91432
"""NM""",54333,78167,23834
"""NV""",26792,55773,28981
"""NY""",-18735,35722,54457
"""OH""",-76722,10843,87565
"""OK""",23052,65474,42422
"""OR""",-31368,67948,99316
"""PA""",8303,70657,62354
"""RI""",4516,26086,21570
"""SC""",-57549,36354,93903
"""SD""",11788,46551,34763
"""TN""",38178,88302,50124
"""TX""",-8142,47607,55749
"""UT""",-59301,20661,79962
"""VA""",-44967,27957,72924
"""VT""",95214,98784,3570
"""WA""",32652,33543,891
"""WI""",10484,23835,13351
"""WV""",12462,31829,19367
"""WY""",-20751,49812,70563
"""HI""",-54981,7388,62369
代码2：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.state{
fill: none;
stroke: #a9a9a9;
stroke-width: 1;
}
.state:hover{
fill-opacity:0.5;
}
#tooltip {
position: absolute;
text-align: center;
padding: 20px;
margin: 10px;
font: 12px sans-serif;
background: lightsteelblue;
border: 1px;
border-radius: 2px;
pointer-events: none;
}
#tooltip h4{
margin:0;
font-size:14px;
}
#tooltip{
background:rgba(0,0,0,0.9);
border:1px solid grey;
border-radius:5px;
font-size:12px;
width:auto;
padding:4px;
color:white;
opacity:0;
}
#tooltip table{
table-layout:fixed;
}
#tooltip tr td{
padding:0;
margin:0;
}
#tooltip tr td:nth-child(1){
width:50px;
}
#tooltip tr td:nth-child(2){
text-align:center;
}
</style>
<body>
<div id="tooltip"></div> <!-- div to hold tooltip. -->
<svg width="960" height="600" id="statesvg"></svg> <!-- svg to hold the map. -->
<script src="http://bl.ocks.org/NPashaP/raw/a74faf20b492ad377312/uStates.js"></script> <!-- creates uStates. -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function tooltipHtml(n, d){ /* function to create html content string in tooltip div. */
return "<h4>"+n+"</h4><table>"+
"<tr><td>Net</td><td>"+(d.Net)+"</td></tr>"+
"<tr><td>In</td><td>"+(d.In)+"</td></tr>"+
"<tr><td>Out</td><td>"+(d.Out)+"</td></tr>"+
"</table>";
}
var sampleData ={}; /* Sample random data. */
<!-- 1. Original Solution -->
<!-- ["HI", "AK", "FL", "SC", "GA", "AL", "NC", "TN", "RI", "CT", "MA", "ME", "NH", "VT", "NY", "NJ", "PA", "DE", "MD", -->
<!-- "WV", "KY", "OH", "MI", "WY", "MT", "ID", "WA", "DC", "TX", "CA", "AZ", "NV", "UT", "CO", "NM", "OR", "ND", "SD", -->
<!-- "NE", "IA", "MS", "IN", "IL", "MN", "WI", "MO", "AR", "OK", "KS", "LS", "VA"] -->
<!-- .forEach(function(d){ -->
<!-- var Net=Math.round(100*Math.random()), -->
<!-- In=Math.round(100*Math.random()), -->
<!-- Out=Math.round(100*Math.random()); -->
<!-- sampleData[d]={ -->
<!-- Net:d3.min([Net,In,Out]), -->
<!-- In:d3.max([Net,In,Out]), -->
<!-- Out:Math.round((Net+In+Out)/3), -->
<!-- color:d3.interpolate("#ffff32", "#3232ff")(Net/100)}; -->
<!-- }); -->
<!-- 2. Load CSV -->
<!-- sampleData = d3.csv("Test.csv", function(data){ -->
<!-- data.forEach(function(d) { -->
<!-- d.Net = +d.Net; -->
<!-- d.In = +d.In; -->
<!-- d.Out = +d.Out; -->
<!-- color = d3.interpolate("#ffff32", "#3232ff")(Net/100)}; -->
<!-- }); -->
<!-- console.log(data[0]); -->
<!-- }); -->
<!-- 3. Load Data -->
sampleData = {
"AK":{"Net":13673,"In":72772,"Out":59099,"color":d3.interpolate("#ffff32", "#3232ff")(0.568365)},
"AL":{"Net":46349,"In":59672,"Out":13323,"color":d3.interpolate("#ffff32", "#3232ff")(0.731745)},
"AR":{"Net":-31164,"In":38140,"Out":69304,"color":d3.interpolate("#ffff32", "#3232ff")(0.34418)},
"AZ":{"Net":-27113,"In":57824,"Out":84937,"color":d3.interpolate("#ffff32", "#3232ff")(0.364435)},
"CA":{"Net":-42460,"In":12772,"Out":55232,"color":d3.interpolate("#ffff32", "#3232ff")(0.2877)},
"CO":{"Net":9039,"In":9163,"Out":124,"color":d3.interpolate("#ffff32", "#3232ff")(0.545195)},
"CT":{"Net":-8192,"In":60579,"Out":68771,"color":d3.interpolate("#ffff32", "#3232ff")(0.45904)},
"DC":{"Net":15000,"In":45262,"Out":30262,"color":d3.interpolate("#ffff32", "#3232ff")(0.575)},
"DE":{"Net":39455,"In":93112,"Out":53657,"color":d3.interpolate("#ffff32", "#3232ff")(0.697275)},
"FL":{"Net":6592,"In":44256,"Out":37664,"color":d3.interpolate("#ffff32", "#3232ff")(0.53296)},
"GA":{"Net":19317,"In":25254,"Out":5937,"color":d3.interpolate("#ffff32", "#3232ff")(0.596585)},
"IA":{"Net":119,"In":46902,"Out":46783,"color":d3.interpolate("#ffff32", "#3232ff")(0.500595)},
"ID":{"Net":21304,"In":94961,"Out":73657,"color":d3.interpolate("#ffff32", "#3232ff")(0.60652)},
"IL":{"Net":6726,"In":96451,"Out":89725,"color":d3.interpolate("#ffff32", "#3232ff")(0.53363)},
"IN":{"Net":66445,"In":71900,"Out":5455,"color":d3.interpolate("#ffff32", "#3232ff")(0.832225)},
"KS":{"Net":43263,"In":63770,"Out":20507,"color":d3.interpolate("#ffff32", "#3232ff")(0.716315)},
"KY":{"Net":28409,"In":39524,"Out":11115,"color":d3.interpolate("#ffff32", "#3232ff")(0.642045)},
"LS":{"Net":-32758,"In":36865,"Out":69623,"color":d3.interpolate("#ffff32", "#3232ff")(0.33621)},
"MA":{"Net":-77135,"In":20768,"Out":97903,"color":d3.interpolate("#ffff32", "#3232ff")(0.114325)},
"MD":{"Net":33582,"In":52556,"Out":18974,"color":d3.interpolate("#ffff32", "#3232ff")(0.66791)},
"ME":{"Net":-33661,"In":63381,"Out":97042,"color":d3.interpolate("#ffff32", "#3232ff")(0.331695)},
"MI":{"Net":25521,"In":46300,"Out":20779,"color":d3.interpolate("#ffff32", "#3232ff")(0.627605)},
"MN":{"Net":-67244,"In":23014,"Out":90258,"color":d3.interpolate("#ffff32", "#3232ff")(0.16378)},
"MO":{"Net":-31720,"In":28241,"Out":59961,"color":d3.interpolate("#ffff32", "#3232ff")(0.3414)},
"MS":{"Net":45311,"In":61848,"Out":16537,"color":d3.interpolate("#ffff32", "#3232ff")(0.726555)},
"MT":{"Net":-6116,"In":33017,"Out":39133,"color":d3.interpolate("#ffff32", "#3232ff")(0.46942)},
"NC":{"Net":-1072,"In":32219,"Out":33291,"color":d3.interpolate("#ffff32", "#3232ff")(0.49464)},
"ND":{"Net":30661,"In":42404,"Out":11743,"color":d3.interpolate("#ffff32", "#3232ff")(0.653305)},
"NE":{"Net":68355,"In":99399,"Out":31044,"color":d3.interpolate("#ffff32", "#3232ff")(0.841775)},
"NH":{"Net":18610,"In":61242,"Out":42632,"color":d3.interpolate("#ffff32", "#3232ff")(0.59305)},
"NJ":{"Net":38709,"In":61706,"Out":22997,"color":d3.interpolate("#ffff32", "#3232ff")(0.693545)},
"NM":{"Net":15182,"In":46812,"Out":31630,"color":d3.interpolate("#ffff32", "#3232ff")(0.57591)},
"NV":{"Net":-10893,"In":86934,"Out":97827,"color":d3.interpolate("#ffff32", "#3232ff")(0.445535)},
"NY":{"Net":-54467,"In":40371,"Out":94838,"color":d3.interpolate("#ffff32", "#3232ff")(0.227665)},
"OH":{"Net":21695,"In":26311,"Out":4616,"color":d3.interpolate("#ffff32", "#3232ff")(0.608475)},
"OK":{"Net":-50523,"In":30579,"Out":81102,"color":d3.interpolate("#ffff32", "#3232ff")(0.247385)},
"OR":{"Net":-51906,"In":37801,"Out":89707,"color":d3.interpolate("#ffff32", "#3232ff")(0.24047)},
"PA":{"Net":-89879,"In":2858,"Out":92737,"color":d3.interpolate("#ffff32", "#3232ff")(0.050605)},
"RI":{"Net":-3146,"In":6730,"Out":9876,"color":d3.interpolate("#ffff32", "#3232ff")(0.48427)},
"SC":{"Net":22085,"In":54977,"Out":32892,"color":d3.interpolate("#ffff32", "#3232ff")(0.610425)},
"SD":{"Net":28055,"In":58411,"Out":30356,"color":d3.interpolate("#ffff32", "#3232ff")(0.640275)},
"TN":{"Net":-75690,"In":4153,"Out":79843,"color":d3.interpolate("#ffff32", "#3232ff")(0.12155)},
"TX":{"Net":-55786,"In":27575,"Out":83361,"color":d3.interpolate("#ffff32", "#3232ff")(0.22107)},
"UT":{"Net":-63853,"In":76,"Out":63929,"color":d3.interpolate("#ffff32", "#3232ff")(0.180735)},
"VA":{"Net":44965,"In":69720,"Out":24755,"color":d3.interpolate("#ffff32", "#3232ff")(0.724825)},
"VT":{"Net":-18735,"In":39534,"Out":58269,"color":d3.interpolate("#ffff32", "#3232ff")(0.406325)},
"WA":{"Net":-8462,"In":48597,"Out":57059,"color":d3.interpolate("#ffff32", "#3232ff")(0.45769)},
"WI":{"Net":-53972,"In":28418,"Out":82390,"color":d3.interpolate("#ffff32", "#3232ff")(0.23014)},
"WV":{"Net":-2571,"In":60715,"Out":63286,"color":d3.interpolate("#ffff32", "#3232ff")(0.487145)},
"WY":{"Net":-16086,"In":52706,"Out":68792,"color":d3.interpolate("#ffff32", "#3232ff")(0.41957)},
"HI":{"Net":1418,"In":15119,"Out":13701,"color":d3.interpolate("#ffff32", "#3232ff")(0.50709)}
};
/* draw states on id #statesvg */
uStates.draw("#statesvg", sampleData, tooltipHtml);
d3.select(self.frameElement).style("height", "600px");
</script>
</body>
1 个答案:
答案 0 :(得分：1)
我不确定你是否可以按照自己的方式使用d3.json。我至少没见过它。此外，您的forEach代码不会为您提供所需的结果。您的代码应该产生如下错误：
SyntaxError: missing ; before statement[Learn More] map.html:71:28
当您为路径着色时，您需要具有状态缩写的属性（其中包含属性（如颜色）的对象）。你需要写一本字典。你可以使用：
var sampleData ={};
d3.csv("Test.csv", function(data){
data.forEach(function(d) {
sampleData[d.State] = {
Net : +d.Net,
In : +d.In,
Out : +d.Out,
color : d3.interpolate("#ffffcc", "#800026")(d.Net/100)
};
});
});
登录sampleData将为您提供以下内容：
Object { AK: Object, AL: Object, AR: Object, AZ: Object, CA: Object, CO: Object, CT: Object, DC: Object, DE: Object, FL: Object, 41 more… }
但是，sampleData只会在d3.json的回调函数中定义 - 因为d3.json是异步的。因此，您需要在其中调用绘图功能。
所以你的代码应该是这样的：
var sampleData ={};
d3.csv("Test.csv", function(data){
data.forEach(function(d) {
sampleData[d.State] = {
Net : +d.Net,
In : +d.In,
Out : +d.Out,
color : d3.interpolate("#ffffcc", "#800026")(d.Net/100)
};
});
uStates.draw("#statesvg", sampleData, tooltipHtml);
});
这给了我这个：
数据正确配对（您可以在鼠标悬停中查看值）。但是，虽然不在你的问题中，但是你的颜色没有正确完成，它们都是#ffffff或#000000。尝试使用比例：
var sampleData ={};
d3.csv("Test.csv", function(data){
var color = d3.scale.linear()
.range(["steelblue","orange"])
.domain([d3.min(data, function(d) { return d.Net/100; }), d3.max(data, function(d) { return d.Net/100; }) ])
data.forEach(function(d) {
sampleData[d.State] = {
Net : +d.Net,
In : +d.In,
Out : +d.Out,
color : color(d.Net/100);
};
});
});
这给了我：
Here is a demonstration您的代码。哦，我还从csv文件中删除了引文，不需要包含它们。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？