Question

我找到了一个使用Javascript D3生成英国地图的脚本。我不知道这个库是如何工作的，但代码很好。我想要做的是在身体中创建一个<div>：

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

在页面末尾运行地图脚本：

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>

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

但是我正在努力使用javascript在<div>中获取地图。

Answer 1

知道了，只需更改

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

要

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

Javascript D3 - 将结果放入DIV

1 个答案: