Javascript D3 - 將結果存入DIV

我發現了一個腳本，它使用JavaScript D3生成英國地圖。我不知道這個庫如何工作，但代碼很好。我想要做的是在體內產生<div>：Javascript D3 - 將結果存入DIV

<body> 
    <div id = "put_map_here"></div> 
</body>

在頁面的最後跑地圖腳本：

document.getElementById("put_map_here").innerHTML = ???

：

var width = 960, 
    height = 1160; 

var projection = d3.geo.albers() 
    .center([0, 55.4]) 
    .rotate([4.4, 0]) 
    .parallels([50, 60]) 
    .scale(1200 * 5) 
    .translate([width/2, height/2]); 

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

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("data/uk-postcode-area.json", function(error, uk) { 
    svg.selectAll(".postcode_area") 
     .data(topojson.feature(uk, uk.objects["uk-postcode-area"]).features) 
    .enter().append("path") 
     .attr("class", "postcode_area") 
     .attr("d", path) 
     .style("fill", function(d) { 
      return "#AAA"; 
      })       
     .append("svg:title") 
      .attr("transform", function (d) { return "translate(" + path.centroid(d) + ")"; }) 
      .attr("dy", ".35em") 
      .text(function (d) { return d.id; }); 

    svg.append("path") 
     .datum(topojson.mesh(uk, uk.objects["uk-postcode-area"], function(a, b) { return a !== b; })) 
     .attr("class", "mesh") 
     .attr("d", path);  

});

然後通過JavaScript填充<div>

但是我正在努力使用javascript獲取<div>中的地圖。

來源

2015-08-18 Lee

明白了，只是改變

var svg = d3.select("body").append("svg")

要

var svg = d3.select("#put_map_here").append("svg")

來源

2015-08-18 08:44:15 Lee

Javascript D3 - 將結果存入DIV

回答

相關問題