傳遞變量文件名topojson

在下面的函數是我這樣做它的工作原理：傳遞變量文件名topojson

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

，但如果我這樣做它打破：

var europe_path = "europe.objects.nuts1"; 

var land = topojson.feature(europe, europe_path);

與此錯誤Uncaught TypeError: Cannot read property 'length' of undefined

如何將一個變量傳遞給topojson？

的代碼看起來是這樣的：

.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); 

var str_a = "europe.objects."; 
var str_b = source; 
var europe_path = str_a.concat(str_b); 
console.log(europe_path); 


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

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

    var europe_path = "europe.objects.nuts1"; 

    var land = topojson.feature(europe, europe_path); 

    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> 

<!-- // d3.json("nuts2.json", function(error, europe) { 

// }); -->

來源

2016-11-06 s.matthew.english