2017-10-04 153 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