2017-10-04 155 views
0

我有四個文件,並且我正在爲此項目使用節點。 我index.ejsapp.jscountymap.jscountries.geo.json是否有可能將ejs變量傳遞給嵌入式JavaScript文件

app.js使用國家代碼數組呈現index.ejs文件(即[「MEX」,「USA」]。然後index.ejs調用countrymap.js,它使用d3使用json渲染地圖countries.geo.json

我想要做的就是將國家代碼傳遞給index.ejs,並根據國家使用它們爲相應國家代碼着色國家.geo .json文件到目前爲止,我已經嘗試了幾種方法,但似乎沒有任何工作可以使用

如果任何人有任何想法,我真的可以使用幫助,這是我最終的作品集和平,而且我被困在第一個障礙,並且如果你認爲我所做的一切都是錯誤的有另一個解決方案,我也很想聽到。

感謝, 喬治

index.ejs

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Passport Social</title> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> 
    <script type="text/javascript" src="https://d3js.org/topojson.v2.min.js"></script> 

</head> 

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <div class="list-group"> 
        <li class="list-group-item active">Info 1</li> 
        <li class="list-group-item">Info 2</li> 
        <li class="list-group-item">Info 3</li> 
       </div> 
      </div> 
      <div class="col-md-9"> 
       <div class="thumbnail"> 
        <svg style="background:grey;"></svg> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script src="js/countrymap.js" type="text/javascript"></script> 



</body> 


</html> 

app.js

var express  = require("express"), 
    app   = express(), 
    bodyParser = require("body-parser"); 


var countrydata = ["MEX","USA"]; 

app.get("/", function(req, res){ 
    res.render("index",{countries:countrydata}); 
}); 

app.use(bodyParser.urlencoded({extended:true})); 
app.set("view engine","ejs"); 
app.use(express.static(__dirname+"/public")); 


app.listen(process.env.PORT,process.env.IP,function(){ 
    console.log("Passport Social Server is Running.") 
}) 

countrymap.js

/*global d3*/ 

var w = 500, 
    h = 300; 

var projection = d3.geo.mercator() 
     .scale(1) 
     .translate([0, 0]); 
var path = d3.geo.path() 
     .projection(projection); 

var svg = d3.select("svg") 
    .attr("width", w) 
    .attr("height", h); 

d3.json("json/countries.geo.json", function(error, world) { 
    if (error) return console.log(error); 
    world.features.forEach(function(path){ 
    }) 

    var b = path.bounds(world), 
     s = .95/Math.max((b[1][0] - b[0][0])/w, (b[1][1] - b[0][1])/h), 
     t = [(w - s * (b[1][0] + b[0][0]))/2, (h - s * (b[1][1] + b[0][1]))/2]; 
    projection.scale(s) 
     .translate(t); 

    svg.selectAll("path") 
     .data(world.features).enter() 
     .append("path") 
     //.style("fill", "black") 
     .style("stroke", "grey") 
     .style("stroke-width", "1px") 
     .attr("d", path) 
     .attr("id", function(d, i) {return (d.id);}); 

}); 
+0

你試過了嗎?<%variable_name%>? –

+0

這在js文件中是不允許的。 –

回答

0

聲明一個變量在你index.ejs文件只是這<script src="js/countrymap.js" type="text/javascript"></script> 對於離上面:

<script type="text/javascript"> 
    var get_countries = <% countries %> 
</script> 
<script src="js/countrymap.js" type="text/javascript"></script> 

然後在您countrymap.js文件中使用JavaScript變量get_countries

+0

或許'<% - JSON.stringify(countries)%>'? – skirtle