我试图让地图能够在鼠标点击上放大对象。该代码基于Mike Bostock关于制作地图的教程，并使用CSV数据集将一些值绑定到这些国家/地区。 https://bost.ocks.org/mike/map/。 我试图使用像这样的各种例子：https://bl.ocks.org/mbostock/2206590但似乎没有任何效果。当我尝试添加.onclick属性时，地图会消失。有谁知道如何让缩放工作？
HTML
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
}
#canvas {
}
#canvas-svg {
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: 1px;
}
#tooltip-container {
position: absolute;
background-color: #fff;
color: #000;
padding: 10px;
border: 1px solid;
display: none;
}
.tooltip_key {
font-weight: bold;
}
.tooltip_value {
margin-left: 20px;
float: right;
}
</style>
<div id="tooltip-container"></div>
<div id="canvas-svg"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
d3.csv("import.csv", function(err, data) {
var config = {"data0":"Country","data1":"Total","label0":"label 0","label1":"label 1","color0":"#99ccff","color1":"#0050A1","width":800,"height":400}
var width = 960,
height = 960;
var COLOR_COUNTS = 9;
function Interpolate(start, end, steps, count) {
var s = start,
e = end,
final = s + (((e - s) / steps) * count);
return Math.floor(final);
}
function Color(_r, _g, _b) {
var r, g, b;
var setColors = function(_r, _g, _b) {
r = _r;
g = _g;
b = _b;
};
setColors(_r, _g, _b);
this.getColors = function() {
var colors = {
r: r,
g: g,
b: b
};
return colors;
};
}
function clicked(d) {
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
g.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });
g.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px");
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function valueFormat(d) {
if (d > 1000000000) {
return "$" + Math.round(d / 1000000000 * 10) / 10 + "M";
} else if (d > 1000000) {
return "$" + Math.round(d / 1000000 * 10) / 10 + "M";
} else if (d > 1000) {
return "$" + Math.round(d / 1000 * 10) / 10 + "B";
} else {
return "$" + d + "M";
}
}
var COLOR_FIRST = config.color0, COLOR_LAST = config.color1;
var rgb = hexToRgb(COLOR_FIRST);
var COLOR_START = new Color(rgb.r, rgb.g, rgb.b);
rgb = hexToRgb(COLOR_LAST);
var COLOR_END = new Color(rgb.r, rgb.g, rgb.b);
var startColors = COLOR_START.getColors(),
endColors = COLOR_END.getColors();
var colors = [];
for (var i = 0; i < COLOR_COUNTS; i++) {
var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i);
var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i);
var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i);
colors.push(new Color(r, g, b));
}
var MAP_KEY = config.data0;
var MAP_VALUE = config.data1;
var projection = d3.geo.mercator()
.scale((width + 1) / 2 / Math.PI)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("#canvas-svg").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
var valueHash = {};
function log10(val) {
return Math.log(val);
}
data.forEach(function(d) {
valueHash[d[MAP_KEY]] = +d[MAP_VALUE];
});
var quantize = d3.scale.quantize()
.domain([0, 1.0])
.range(d3.range(COLOR_COUNTS).map(function(i) { return i }));
quantize.domain([d3.min(data, function(d){
return (+d[MAP_VALUE]) }),
d3.max(data, function(d){
return (+d[MAP_VALUE]) })]);
d3.json("./world-topo-min.json", function(error, world) {
var countries = topojson.feature(world, world.objects.countries).features;
svg.append("path")
.datum(graticule)
.attr("class", "choropleth")
.attr("d", path);
var g = svg.append("g");
g.append("path")
.datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
.attr("class", "equator")
.attr("d", path);
var country = g.selectAll(".country").data(countries);
country.enter().insert("path")
.attr("class", "country")
.attr("d", path)
.attr("id", function(d,i) { return d.id; })
.attr("title", function(d) { return d.properties.name; })
.style("fill", function(d) {
if (valueHash[d.properties.name]) {
var c = quantize((valueHash[d.properties.name]));
var color = colors[c].getColors();
return "rgb(" + color.r + "," + color.g +
"," + color.b + ")";
} else {
return "#ccc";
}
})
.on("mousemove", function(d) {
var html = "";
html += "<div class=\"tooltip_kv\">";
html += "<span class=\"tooltip_key\">";
html += d.properties.name;
html += "</span>";
html += "<span class=\"tooltip_value\">";
html += (valueHash[d.properties.name] ? valueFormat(valueHash[d.properties.name]) : "");
html += "";
html += "</span>";
html += "</div>";
$("#tooltip-container").html(html);
$(this).attr("fill-opacity", "0.8");
$("#tooltip-container").show();
var coordinates = d3.mouse(this);
var map_width = $('.choropleth')[0].getBoundingClientRect().width;
if (d3.event.pageX < map_width / 2) {
d3.select("#tooltip-container")
.style("top", (d3.event.layerY + 15) + "px")
.style("left", (d3.event.layerX + 15) + "px");
} else {
var tooltip_width = $("#tooltip-container").width();
d3.select("#tooltip-container")
.style("top", (d3.event.layerY + 15) + "px")
.style("left", (d3.event.layerX - tooltip_width - 30) + "px");
}
})
.on("mouseout", function() {
$(this).attr("fill-opacity", "1.0");
$("#tooltip-container").hide();
});
g.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
function clicked(d) {
if (active.node() === this) return reset();
active.classed("active", false);
active = d3.select(this).classed("active", true);
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
g.transition()
.duration(750)
.style("stroke-width", 1.5 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}
function reset() {
active.classed("active", false);
active = d3.select(null);
g.transition()
.duration(750)
.style("stroke-width", "1.5px")
.attr("transform", "");
}
d3.select(self.frameElement).style("height", height + "px");
});
</script>
CSV
,Country,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,Total
,Afghanistan,,,34,,,35,3,41,150,344,377,660,521,235,288,74,2763
,African Union**,,,,,,53,9,,10,,,,,2,,2,76
,Albania,,,,2,,7,,5,,,,,15,7,7,7,50
,Algeria,412,546,249,195,242,159,340,509,1529,1075,829,1115,889,373,487,636,9585
,Angola,147,156,148,48,8,39,7,31,29,20,,,,31,2,61,726
,Argentina,213,6,16,12,168,3,9,24,23,16,14,46,36,44,14,23,668
,Armenia,,,,,118,,,1,,46,52,5,,16,,,238
,Australia,338,1236,663,801,472,459,727,675,445,775,1507,1567,876,255,932,1574,13301
,Austria,25,15,69,42,55,23,4,269,190,286,7,8,8,6,2,,1008
,Azerbaijan,3,,89,,4,53,159,211,29,142,146,557,333,398,602,285,3012
,Bahamas,33,,,,,3,,,,1,,,,,29,22,88
,Bahrain,299,30,54,1,10,66,63,26,20,,103,1,26,78,10,,786
,Bangladesh,203,266,41,8,32,10,221,88,13,,35,193,252,727,257,653,2997
,Barbados,,,,,,,,10,10,10,,,,,,,29
,Belarus,,,,,,6,140,,,3,,75,75,75,60,164,598
,Belgium,35,29,56,21,15,3,27,174,203,90,32,21,32,46,103,49,934
,Belize,1,,,,,,,,,,,,,,,,1
,Benin,,,7,,,,,3,,1,0,0,20,2,,,33
,Bhutan,,,,,0,,,,,,,,,,,1,1
,Bolivia,19,,,5,1,1,9,2,3,5,1,25,12,1,46,7,136
,Botswana,53,15,1,9,8,,,,,13,10,,,8,,,119
,Brazil,122,626,213,100,81,224,179,189,179,189,318,312,311,223,284,289,3840
,Brunei,,4,1,0,0,1,2,,,33,33,229,22,15,122,36,498
,Bulgaria,,,,2,12,132,22,48,116,119,8,29,5,,,3,495
,Burkina Faso,,,,,,12,1,4,,2,0,15,4,,5,6,48
,Burundi,,1,3,,,,,,,1,2,,5,,,1,14
,Cambodia,,,,,,,14,56,,4,34,,77,67,,,252
,Cameroon,,7,6,,,5,2,,1,,10,,,39,107,2,177
,Canada,570,538,428,152,352,124,104,456,408,106,236,351,211,194,306,395,4931
,Cape Verde,1,,,,,,,,,2,,,10,,,,12
,Central African Republic,,,,,,,9,,0,,,7,,,,,16
,Chad,,16,,,,,17,20,75,35,38,1,4,59,57,,322
,Chile,202,60,74,187,70,449,1095,662,397,335,475,316,62,51,125,114,4673
,China,2552,2833,2891,2373,3316,3558,2900,1692,1892,1407,1045,1128,1703,1452,1184,1214,33140
,Colombia,60,278,171,147,18,16,56,234,110,248,255,145,207,162,190,215,2510
,Comoros,,,,,,,,,6,,,,1,,,,7
,Democratic Republic of Congo,0,,,,,4,1,0,,1,27,,23,12,13,,81
,Costa Rica,,,,,,,,,,,,,1,,1,,2
,Cote d'Ivoire,0,,32,61,9,,,,,,,,,,6,6,113
,Croatia,,57,2,24,8,,,15,99,4,10,17,17,,63,11,326
,Cyprus,4,115,1,6,16,20,26,17,,,44,41,6,,,,295
,Czech Republic,14,65,47,97,7,593,45,10,23,6,13,71,22,15,,0,1029
,Denmark,50,153,51,54,228,120,83,146,95,129,17,,109,42,177,0,1455
,Djibouti,1,,3,,4,7,,,,,,,6,5,12,7,44
,Dominican Republic,13,5,0,8,35,2,,,,10,51,12,,,,1,137
,DR Congo,88,15,12,,,19,17,,18,41,151,,10,1,,,374
,Ecuador,,10,1,,15,48,17,2,102,77,90,68,88,11,53,1,583
,Egypt,837,847,719,630,654,778,678,651,333,159,686,630,281,675,368,1475,10401
,El Salvador,,,19,10,,,,,4,,,,2,,20,,55
,Equatorial Guinea,,7,,,7,12,,28,30,68,3,82,65,2,92,,394
,Eritrea,20,57,18,17,80,98,,4,,,,,,,,,293
,Estonia,27,,1,13,8,23,7,19,29,43,13,1,2,18,2,22,228
,Ethiopia,140,,20,174,239,,,,,,54,76,193,153,30,,1079
,Finland,474,9,12,227,77,107,136,108,135,42,50,58,76,280,156,228,2172
,France,107,66,43,57,93,2,67,74,5,76,103,33,91,107,17,34,976
,Gabon,,,,,6,,20,18,,,22,5,1,2,,3,77
,Gambia,,,,,5,,,,,16,,,,,,,21
,Georgia,6,85,,1,37,92,97,155,91,36,,2,,5,1,,608
,Germany,113,133,71,64,239,204,416,82,292,339,282,84,157,113,114,102,2804
,Ghana,1,12,1,6,35,0,0,16,,11,2,76,39,63,14,13,290
,Greece,708,787,400,2274,1368,405,731,1712,516,1229,652,80,37,52,199,762,11910
,Guatemala,,,,,,,,,0,,,,2,,,33,35
,Guinea,18,6,,2,,1,,0,,,4,1,4,,5,,40
,Guyana,,7,3,,,,,,0,,,,,,,,10
,Palestine,,,,,,,,,,,1,2,,,0,,3
,Lebanon,0,0,3,0,1,0,9,,,20,20,,,,,,54
,Honduras,,,,,,,,,0,,,0,0,20,13,6,39
,Hungary,14,14,,,72,13,253,196,5,4,18,9,,2,7,,604
,Iceland,,,,,,,,,,,,50,,,,,50
,India,995,1321,1911,2878,2180,1161,1480,2299,1867,1945,3017,3706,4545,5291,3487,3078,41160
,Indonesia,151,27,68,356,79,36,61,577,239,436,225,250,218,802,1136,683,5341
,Iran,418,524,435,282,121,57,423,331,62,62,103,103,47,31,13,13,3025
,Iraq,,,,,71,186,305,263,377,398,453,603,474,353,650,1215,5348
,Ireland,0,45,22,,19,5,13,19,22,0,5,2,1,,40,41,232
,Israel,368,131,349,189,852,1133,1122,862,676,153,67,85,120,153,510,617,7387
,Italy,241,221,243,559,446,162,433,525,220,109,115,298,219,91,145,596,4623
,Jamaica,,,,,,10,10,13,2,,1,,,1,,2,38
,Japan,491,441,477,480,400,464,511,498,680,525,426,292,270,306,480,310,7050
,Jordan,133,160,121,281,157,49,48,176,161,234,87,214,175,81,252,198,2526
,Kazakhstan,121,139,20,,47,42,44,82,25,39,58,52,84,141,93,419,1406
,Kenya,15,,,,,,,10,,,112,14,60,1,17,30,258
,Kosovo,,,,,,,,,,,,,,,1,,1
,Kuwait,245,67,23,45,2,12,5,279,5,9,85,113,31,73,692,366,2052
,Kyrgyzstan,,,,9,5,3,2,,,,,,,,,,19
,Laos,7,36,,0,,4,,,7,26,,14,19,19,,7,138
,Latvia,3,13,3,25,12,4,9,49,44,11,14,27,9,5,5,1,234
,Lebanon,4,,,,,1,,5,1,52,64,2,31,24,5,50,239
,Lesotho,,6,,,1,,1,,,,,,,,,,8
,Liberia,8,,,,,,,,,,,,,,,,8
,Libya,1,14,15,16,26,24,8,73,120,10,44,349
,Lithuania,6,16,12,1,47,9,52,4,27,27,8,1,1,73,3,21,308
,Uganda,,,0,,,,,,,,,,,,,,0
,Sri Lanka,1,,1,,,0,,,,,,,,,,,2
,Luxembourg,,,,1,,,,,,7,7,,1,,,,16
,Macedonia,14,112,,,,,0,,,,,,,1,,,128
,Madagascar,,,,,,,,,,0,,,,0,,,0
,Malawi,,,,,,,,,3,,,,1,2,2,,7
,Malaysia,26,26,154,147,65,57,398,526,508,1512,421,5,47,71,73,190,4227
,Maldives,,,,,,,15,,,,5,,,5,,,24
,Mali,7,,1,,,13,,8,3,10,,,9,6,,,57
,Malta,0,0,,,,18,,,,,,8,8,,12,,45
,Mauritania,31,,26,7,,,,,,,9,5,11,10,5,,103
,Mauritius,,,,,6,,,,,,,,,,45,,51
,Mexico,227,152,97,31,320,33,75,,22,59,112,229,261,69,97,500,2284
,Mongolia,,,,,,,,,14,,27,3,51,,,13,107
,Morocco,125,11,156,12,14,101,47,27,46,39,306,1398,826,82,572,42,3803
,Mozambique,0,,,1,,,,,,,,0,0,9,12,,22
,Myanmar,16,149,157,83,194,160,175,138,93,52,63,664,478,237,300,320,3277
,Namibia,,21,11,,16,,72,6,66,15,,1,57,9,2,,276
,NATO**,,18,,,,,116,,,420,,,22,,,,576
,Nepal,,11,9,9,34,6,,,1,,,3,,,5,14,91
,Netherlands,125,178,244,125,127,102,320,240,157,288,193,149,376,332,10,86,3052
,New Zealand,,45,17,107,49,10,5,81,2,48,58,23,25,26,79,56,631
,Nicaragua,,,,,,,,14,,14,,,,,,,28
,Niger,,,,14,,,,,8,1,0,,,13,3,9,48
,Nigeria,36,7,6,62,6,,15,52,19,65,186,65,4,35,224,188,971
,Macedonia,,0,,,,,,,,,,,,,,,0
,Afghanistan,19,207,,,,,,,,,,,,,,,226
,North Korea,18,28,9,8,8,5,15,5,5,4,1,,,,,,103
,Norway,229,99,90,14,6,14,542,567,624,588,159,614,149,62,23,143,3921
,Libya,,,,,,,,,,,,0,,,,,0
,Oman,118,33,40,36,41,173,301,16,75,93,30,21,120,490,736,148,2469
,Pakistan,175,408,541,628,455,421,338,670,1047,1214,2176,1063,1028,1144,752,735,12797
,Palestine,,,,,,,,2,,14,6,,,,,,21
,Panama,,,1,,,,,,,7,,,15,30,,,52
,Papua New Guinea,,,,,,,,,,,,,,,3,,3
,Paraguay,,6,,,4,1,,,,,3,8,7,0,,,29
,Peru,24,5,16,22,47,368,193,172,,43,46,63,10,49,153,169,1380
,Philippines,,10,5,10,34,12,23,16,10,1,3,63,16,75,12,158,449
,PIJ (Israel/Palestine)*,,,,,,,,,,,,,0,,,,0
,Poland,148,36,255,349,225,112,463,990,594,169,158,92,207,155,252,131,4336
,Portugal,2,19,,29,70,157,220,60,144,369,892,168,40,13,4,11,2196
,PRC (Israel/Palestine)*,,,,,,,,,,,,,,,0,,0
,Qatar,14,11,11,11,,,,27,,286,30,198,319,73,55,655,1690
,Romania,21,19,16,17,285,437,61,98,78,56,105,80,21,20,0,22,1335
,Russian Federation,,,,,,,4,100,,8,22,11,98,153,206,88,690
,Rwanda,14,,,,,,2,15,8,11,,,5,11,14,7,86
,Saudi Arabia,85,61,567,167,1170,167,205,214,363,796,1070,1237,1080,1672,2782,3161,14796
,Senegal,,,,,,15,9,18,6,4,4,20,,6,7,11,99
,Serbia,1,27,,,,,,,,,16,,0,,,,44
,Seychelles,,,,,,15,,,,,,8,,7,16,,45
,Sierra Leone,,,,,,,9,,,,,2,0,1,,,12
,Singapore,798,254,234,83,376,538,69,355,1113,1481,1020,935,828,780,683,98,9645
,Slovakia,0,,27,,,4,,0,,9,9,,2,6,,,57
,Slovenia,2,41,2,17,17,3,3,2,,6,40,28,,,,,162
,Somalia,,,,,,,,,,,,,,3,,0,3
,South Africa,6,18,,,,262,708,881,486,128,180,212,132,2,50,,3065
,South Korea,1396,773,528,752,1059,804,1650,1755,1683,796,1250,1553,1066,182,715,245,16207
,South Sudan,,,,,,,,37,44,1,,61,3,5,18,22,190
,Spain,334,168,289,253,315,363,315,337,346,235,290,181,238,176,127,153,4119
,Sri Lanka,297,161,45,35,49,58,97,89,71,,5,21,,,5,,934
,Sudan,,106,49,204,293,132,65,33,128,89,182,173,119,196,61,27,1858
,Suriname,2,,,,,,,,,,,,,7,,3,11
,Swaziland,1,1,,,,,,,,,,,,,,,2
,Sweden,204,165,75,64,47,78,122,41,44,54,51,191,206,52,43,43,1481
,Switzerland,23,68,63,117,203,168,83,108,18,39,47,31,9,4,0,2,983
,Syrian Arab Republic,64,28,45,69,25,35,100,20,276,193,298,368,371,361,15,,2267
,Syria rebels*,,,,,,,,,,,,,1,1,0,,2
,Taiwan (ROC),585,345,298,117,319,691,503,12,11,60,97,198,425,553,1084,681,5978
,Tajikistan,,,,,,,13,7,,32,,,,3,,,55
,Tanzania,3,,,51,,10,12,1,,25,,78,115,92,26,20,433
,Thailand,85,117,152,131,114,70,47,8,13,64,49,270,289,392,93,185,2078
,Timor-Leste,,,,,,,,,,,18,,,,,,18
,Togo,,,,,,,,,,,1,,4,,16,,21
,Tonga,,,,,,,,,,,,,,,,5,5
,Trinidad and Tobago,11,0,2,,,,,6,,,24,12,12,,,46,113
,Tunisia,,,83,1,,168,2,,3,,7,7,,38,43,6,357
,Turkey,1190,510,905,330,257,1113,531,692,710,780,484,770,1503,650,1556,448,12427
,Turkmenistan,,,,18,21,,,,7,36,14,236,115,69,102,122,739
,UAE,247,186,222,685,1210,2170,2021,919,752,561,605,1210,1088,2235,731,1289,16128
,Uganda,6,,34,,36,10,5,,5,23,37,471,219,20,,3,868
,UIC (Somalia)*,,,,,,,0,,,,,,,,,,0
,Ukraine,,,,,,,,,,,,,,,1,10,11
,Ukraine Rebels*,,,,,,,,,,,,,,,24,,24
,United Kingdom,871,1277,719,761,212,27,308,764,508,383,511,368,586,492,214,382,8381
,United Nations**,31,,,,2,1,2,1,0,,,,,5,23,4,69
,United States,330,487,499,592,560,520,641,819,951,968,1111,995,1180,802,566,565,11587
,United Wa State (Myanmar)*,,1,,,,,,,,,,,,,,,1
,Unknown country,,2,,0,,,,,12,,8,6,,30,31,51,139
,Unknown rebel group*,,0,0,,,,,,,,,,,,,,0
,Uruguay,4,,11,,,20,8,3,78,29,20,,,6,9,8,196
,Uzbekistan,,8,9,,,,,,,,,,,,,62,79
,Venezuela,108,103,50,15,9,21,380,774,737,358,208,594,680,1165,173,162,5535
,Viet Nam,7,85,66,28,304,297,41,8,204,78,184,1039,766,362,1078,870,5414
,Yemen,158,85,593,62,254,317,38,66,40,5,258,45,38,23,6,12,2000
,Zambia,33,,2,,,0,30,5,2,,,1,66,,,24,161
,Zimbabwe,3,10,,16,,25,25,,,,,,,,,,78