我使用d3創建一個使用json文件創建邊界的交互式地圖,但我停在需要顯示一層的地方,在我的情況下將是首都城市和什麼時候因爲所有數據都在一個json文件中,但是我們可以知道name_1 == name_2是否是首都(第1層),否則將會是較小的城市(第1層)層2)出現只有當層1被點擊使用點擊事件的兩層d3地圖
這就是我的代碼表示兩者層1和2在同一時間
//Width and height
var width = 600,
height = 600
var color = d3.scaleLinear()
.range(["rgb(254,224,210)","rgb(252,146,114)","rgb(222,45,38)"]);
//Define map projection //projection
var projection = d3.geoMercator()
.translate([0, 0])
.scale(1);
//Define path generator
var path = d3.geoPath()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", clicked);
var g = svg.append("g");// <g> element is used to group SVG shapes together
//Load in GeoJSON data
d3.json("JOR_layer3.json", function(error,json) {//jordan.geo
if (error) throw error;
// Calculate bounding box transforms for entire collection
var b = path.bounds(json),
s = 0.95/Math.max((b[1][0] - b[0][0])/width, (b[1][1] - b[0][1])/height),
t = [(width - s * (b[1][0] + b[0][0]))/2, (height - s * (b[1][1] + b[0][1]))/2];
console.log (json.features);
json.features.forEach(function (d) {
console.log (d.properties.NAME_1);
})
// Update the projection
projection
.scale(s)
.translate(t);
//Bind data and create one path per GeoJSON feature
g.append("g")
.attr("id", "city-polygon")
.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function (d, i) { //console.log (d);
return color(i);})
/*.style('stroke', 'white')
.style('stroke-width', 0.7);*/
.on("click", clicked);
g.selectAll(".city-name")
.data(json.features)
.enter()
.append("text")
.attr("class", "city")
.attr("transform", function(d) {
var centroid = path.centroid(d),
x = centroid[0],
y = centroid[1];
return "translate(" + x + "," + y + ")";
// + "scale(1)"
// + "translate(" + -x + "," + -y + ")";
})
.attr('text-anchor', 'middle')
.text (function (d) { return d.properties.NAME_2; });
});
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");
}
和JSON文件
{"type":"FeatureCollection","bbox":[34.95763778686535,29.18587875366211,39.30208587646493,33.36817169189466],
"features":[{"type":"Feature","properties":{"ID_0":116,"ISO":"JOR","NAME_0":"Jordan","ID_1":1,"NAME_1":"Ajlun","ID_2":1,"NAME_2":"Ajlun",
"HASC_2":"JO.AJ.AJ","CCN_2":0,"CCA_2":null,"TYPE_2":"Nahia","ENGTYPE_2":"Sub-Province","NL_NAME_2":null,"VARNAME_2":"Ajlun"},
"geometry":{"type":"Polygon","coordinates":[[[35.709953308105526,32.38688278198248],[35.7218132019043,32.38408279418957],[35.737407684326115,32.38139343261719],
[35.740989685058594,32.380111694335994],[35.7465705871582,32.376800537109375],[35.706249237060604,32.372310638427734],[35.709953308105526,32.38688278198248]]]}},"type":"Feature","properties":{"ID_0":116,"ISO":"JOR","NAME_0":"Jordan","ID_1":1,"NAME_1":"Ajlun","ID_2":2,"NAME_2":"Kofranjah",
"HASC_2":"JO.AJ.KF","CCN_2":0,"CCA_2":null,"TYPE_2":"Nahia","ENGTYPE_2":"Sub-Province","NL_NAME_2":null,"VARNAME_2":null},
"geometry":{"type":"Polygon","coordinates":[[[35.74267196655279,32.16957473754883],[35.733383178710994,32.174312591552734],
[35.72740554809576,32.17792892456055],[35.72211837768566,32.181858062744254],[35.754566192626896,32.18144989013672],[35.74267196655279,32.16957473754883]]]}}]}
你只要給我完美的答案 – DANAA
可以請你給我你用 – DANAA
的world.json文件,您應該能夠在這裏找到它:https://bl.ocks.org/andrew-reid/raw/850e6a2b10a9fbe7cbc94d38e5f1ae93 /world.json –