重繪D3地圖下拉菜單中選擇

的地圖將在下拉換一次，從那裏開始，其他版本下來菜單 - 如果你選擇它。

但我想讓它可以來回切換 - 現在它是單向的並且粘滯 - 它應該能夠來回切換。

如何做到這一點？

這裏是我的代碼如下所示：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.border { 
    stroke: #000; 
    fill: none; 

} 
.graticule { 
    fill: none; 
    stroke: #777; 
    stroke-width: .5px; 
    stroke-opacity: .5; 
} 

div.tooltip { 
    position: absolute; 
    text-align: center; 
    width: 84px; 
    height: 64px; 
    padding: 2px; 
    font: 12px sans-serif; 
    background: lightgrey; 
    border: 0px; 
    border-radius: 8px; 
    pointer-events: none; 
} 
</style> 
<body> 

<h1>Administrative Sub-Regions of Europe</h1> 

<select id="json_sources" name="json_sources"> 
    <option value ="nuts1" selected>Source 1</option> 
    <option value ="nuts2">Source 2</option> 
<!--  <option value ="source3.json">Source 3</option> --> 
</select> 


<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/topojson.v1.min.js"></script> 
<script src="http://d3js.org/colorbrewer.v1.min.js"></script> 
<script src="https://cdn.rawgit.com/rveciana/d3-composite-projections/v0.2.0/composite-projections.min.js"></script> 
<script> 

var div = d3.select("body").append("div") 
     .attr("class", "tooltip") 
     .style("opacity", 0); 

var width = 600, 
    height = 500; 

var projection = d3.geo.conicConformalEurope(); 
var graticule = d3.geo.graticule(); 

var path = d3.geo.path() 
    .projection(projection); 


// Find new colours here: http://colorbrewer2.org/ 
var scale = d3.scale.quantize().domain([10,60]).range(colorbrewer.PuRd[3]); 
var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 


    svg.append("path") 
     .datum(graticule) 
     .attr("class", "graticule") 
     .attr("d", path); 



var dropdown = d3.select("#json_sources") 
var change = function() { 
    var source = dropdown.node().options[dropdown.node().selectedIndex].value; 


var str1 = source; 
var str2 = ".json"; 
var file = str1.concat(str2); 
console.log(file); 


    d3.json(file, function(error, europe) { 

    d3.csv("povertry_rate.csv", function(error, povrate) { 


    //change the map to apadpt to the nuts file 
    if (source == "nuts1") { 

    var land = topojson.feature(europe, europe.objects.nuts1); 

    } else if (source == "nuts2") { 

    var land = topojson.feature(europe, europe.objects.nuts2); 

    } 


    data = {}; 
    povrate.forEach(function(d) { 
     data[d.GEO] = d['2013']; 
    }); 

    console.info(data); 
    svg.selectAll("path") 
     .data(land.features) 
     .enter() 
     .append("path") 
     .attr("d", path) 
     .style("stroke","#000") 
     .style("stroke-width",".5px") 
     .style("fill",function(d){ 
      var value = data[d.id]; 
      if (isNaN(value)){ 
       value = data[d.id.substring(0,2)]; 
      } 
      if (isNaN(value)){ 
       return "#fff"; 
      } 

      return scale(value); 
      }) 
     .on("mouseover", function(d,i) { 
      var value = data[d.id]; 
      if (isNaN(value)){ 
       value = data[d.id.substring(0,2)]; 
      } 
      div.transition() 
       .duration(200) 
       .style("opacity", 0.9); 
      div.html("<b>"+d.properties.name+"</b><br/>" + value + "%") 
       .style("left", (d3.event.pageX) + "px") 
       .style("top", (d3.event.pageY - 28) + "px"); 
     }) 
     .on("mouseout", function(d,i) { 
      div.transition() 
       .duration(500) 
       .style("opacity", 0); 
     }); 

     svg 
      .append("path") 
      .style("fill","none") 
      .style("stroke","#000") 
      .attr("d", projection.getCompositionBorders()); 


    }); 




    }) 
} 

dropdown.on("change", change) 
change(); //trigger json on load 



</script> 


</body>

的數據爲here on my GitHub，如果你想嘗試一下。

來源

2016-11-06 s.matthew.english

你已得你每次繪製地圖之前添加此

//clear way for the regeneration 
    d3.selectAll("path").remove();

來源

2016-11-07 13:44:01

重繪D3地圖下拉菜單中選擇

回答

相關問題