Question

我真的可以从这方面的一些帮助中受益。我用d3js加载了一个基本的geojson文件，我试图默认显示整个区域。目前，默认行为有点过于“放大”，除非我缩小一点，否则我看不到整个区域。如果我使用更小的区域（如县），它太“缩小”了;

我想知道的是如何让包含地图的区域显示我想要的范围。

以下示例是“放大”的示例：

此处的当前行为：https://lh6.googleusercontent.com/-398lXVIQwVg/U6widiWTlTI/AAAAAAAAAJE/HeAmhdgRGrs/s1600/wrong.PNG

这里有所需的行为：https://lh6.googleusercontent.com/-w3UJ6m3uwBI/U6wimuRvuiI/AAAAAAAAAJM/ufCnO-GzM30/s1600/good.PNG

我目前的代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Display Map</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
      <style type="text/css">

      body {
        font: 10px sans-serif;
      }

      </style>
      </head>
     <body>
<script>

// Variables
var svgWidth  = 400,
    svgHeight = 400,
    margin = {"top": 25, "right": 25, "bottom": 25, "left": 25},
    width  = svgWidth  - margin.left - margin.right,
    height = svgHeight - margin.top  - margin.bottom;

// Mexico Path (var boundaryPath) taken from
// http://upload.wikimedia.org/wikipedia/commons/c/c5/Blank_Mexico_map%2C_no_States.svg
// taken only for personal, learning purposes
var boundaryPath = "[][][]][][][]"

// Create SVG Viewport
var svgViewport = d3.select("body").append("svg")
    .attr("width",  width  + margin.left + margin.right)
    .attr("height", height + margin.top  + margin.bottom)
    .style("border", "1px solid");

function zoomFunction() {
  d3.select("path")
    .attr("transform",
        "translate(" + d3.event.translate
        + ") scale (" + d3.event.scale + ")");
}

var zoom = d3.behavior.zoom()
    .scaleExtent([0.2, 10])
    .on("zoom", zoomFunction);

// Define Inner Drawing Space
var innerSpace = svgViewport.append("g")
    .attr("class", "inner_space")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

innerSpace.append("g").attr("class", "hidden rectangle")
    .append("rect")
    .attr("class", "background")
    .attr("x", function(d, i) { return 0; })
    .attr("y", function(d, i) { return 0; })
    .attr("width", function(d, i) { return width; })
    .attr("height", function(d, i) { return height; })
    .style("fill", "white");

// Draw Country Path
var boundaryPath = innerSpace.append("path")
    .attr("d", boundaryPath)
    .attr("fill", "gray");

            </script>
     </body>
</html>

感谢您的时间，

如何在特定范围内使用d3js显示GeoJson数据并默认缩放？

0 个答案: