使用點擊事件的兩層d3地圖

Question

我使用d3創建一個使用json文件創建邊界的交互式地圖，但我停在需要顯示一層的地方，在我的情況下將是首都城市和什麼時候因爲所有數據都在一個json文件中，但是我們可以知道name_1 == name_2是否是首都（第1層），否則將會是較小的城市（第1層）層2）出現只有當層1被點擊

這就是我的代碼表示兩者層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]]]}}]} 

Answer 1

如果我理解正確的話您的問題需要解決這一聲明示例：

我需要表現出一層......省會城市，當它是點擊 另一層會爲小城市

創建和上下文是：

個

所有的數據都在一個JSON文件

---

對於這個答案我不會放大到每個區域的點擊，因爲這個問題是關於顯示基於點擊數據。我也使用d3 v4，它可以允許更容易的自動翻譯和縮放地圖的fitExtent方法 - 我建議你看看它。然而，在這種情況下，我只是使用了一個手動定義的投影來實現更簡單和更清晰的演示。

一種方法似乎最簡單，最自然的這樣一個問題：繪製所有功能馬上，但隱藏一些數據，以便以後可以切換它：

因此，對於你的數據，這可能是這樣的：

g.selectAll(".primary-city") 
    .data(jordan.features) 
    .enter() 
    .filter(function(d) { return d.properties.name_1 == d.properties.name_2 }) 
    .append("text") 
    .attr("class", "primary-city") 
    .attr("transform", function(d) { return 'translate('+path.centroid(d)+')'; }) 
    .attr('y',-10) 
    .attr('text-anchor', 'middle') 
    .text (function (d) { console.log(d); return d.properties.name_2; }); 

g.selectAll(".secondary-city") 
    .data(jordan.features) 
    .enter() 
    .filter(function(d) { return d.properties.name_1 != d.properties.name_2 }) 
    .append("text") 
    .attr("class", "secondary-city") 
    .attr("transform", function(d) { return 'translate('+path.centroid(d)+')'; }) 
    .attr('y',-10) 
    .attr('opacity',0) 
    .attr('pointer-events','none') 
    .attr('text-anchor', 'middle') 
    .text (function (d) { console.log(d); return d.properties.name_2; }); 

上面的代碼將把你的geojson分成兩個不同的'層'，由類名分開。二級城市的名字將在繪製時隱藏（不透明度= 0）。

現在，所有你需要的是有一個click事件調用的線沿線的一個功能：

var clicked = false; 

function click() { 
    clicked = !clicked; 
    if (clicked == true) { 
     g.selectAll(".secondary-city") 
      .transition() 
      .attr('opacity',1) 
      .duration(400); 
    } 
    else { 
     g.selectAll(".secondary-city") 
      .transition() 
      .attr('opacity',0) 
      .duration(400); 
    } 
} 

是什麼樣子完全？那麼我已經放在一起bl.ock所以你可以看到here（我認爲與相同的數據源。此外，你必須點擊一個功能在約旦觸發它）。如果您希望將點擊分配到特定的地理要素，則可以採用與過濾文本類似的方法，並使用類進行區分。