Question

我试图在D3中渲染这个简单的地图，但它绝对没有显示。这是JSON文件a link。我通过jsonlint运行这个JSON文件，所以猜猜文件没问题。然而，它并没有表现出什么。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"      type="text/javascript" ></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
  <link rel="stylesheet" href="#">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
<h3>Map</h3>
<div>
  <script type="text/javascript">
  var projection = d3.geo.mercator()
    .scale(29100)
    .translate([7310, 3500]);

     var path = d3.geo.path();
     .projection(projection);
     d3.json("pak.json", function(json) {
     g.append("g")
     .attr("id", "District")
        svg.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", d3.geo.path());

});
  </script>
  </div>

</body>
</html>

Answer 1

你还没有真正创建过svg，这就是你什么都看不到的原因。

此外，您的代码中有一些内容会导致错误。您指的是svg和g变量而未定义它们。您有一个分号path与.projection分隔开的分号。以下是您想要做的基本想法，但您需要根据您的数据对其进行调整：

// setup your path and projection functions
var projection = d3.geo.mercator()
  .scale(29100)
  .translate([7310, 3500]);
var path = d3.geo.path()
  .projection(projection);

// create an svg
var svg = d3.select('body').append('svg')
  // give it a size, you'll need to adjust this to fit your needs
  .attr('width', 500)
  .attr('height', 300)

// load the json file
d3.json('pak.json', function(json) {
  // when it loads, create a 'g' element inside the svg
  svg.append('g')
    .attr('id', 'District')
    // bind your data to it
    .data(json.features)
      // append a 'path' to the 'g' element for each datum
      .enter()
      .append('path')
        // use your path function to construct a path based on the data
        .attr('d', path)

Answer 2

主要的是svg尚未定义。如果要在页面上使用svg，则需要有svg画布。它看起来好像在复制和粘贴行g.append等时意外地切断了sv。

一旦整理完毕，需要更新比例和翻译以使地图可见。您可以使用反复试验来实现这一目标或进行计算。如果你想计算它。这个question值得一读。

另一件事是更改.attr("path", ...)行。您已经定义了将生成路径的路径变量，因此无需重复它，只需调用变量。

// changed the scale and translation to something more suitable var projection = d3.geo.mercator()
    .scale(1700)
    .translate([-1700, 1200]);

// setup dimensions of svg container 
var h = 500,
    w = 900;

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

// create svg container (NB this requires a div with id map
var svg = d3.select("#map")
    .append("svg")
    .attr("height", h)
    .attr("width", w);

d3.json("pak.json", function(json) {

    // Not sure what this is meant to do
    svg.append("g")
        .attr("id", "District");

    // The last line just needs to call the path variable defined above
    svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);

});

地图不会在D3中渲染

2 个答案: