D3初始縮放默認墨卡託投影尺度

我有一個特定的問題，以默認的墨卡託投影尺度值縮放行爲，在我的情況是一個相當荒謬的價值（75000），因爲不知何故它是我能夠讓我的TOPOJson地圖成爲除點之外的項目。D3初始縮放默認墨卡託投影尺度

我創建了一個地圖投影，並希望添加縮放和平移。我的功能都可以工作，除了默認的縮放值以外。只要滾動縮放，該值就會跳回到默認投影比例值，而不是基於鼠標滾輪進行縮放。我有一種感覺，原因是爲了讓地圖顯示，我需要使投影比例值真的很高（75000）。

所以在頁面加載時，變焦看起來不錯，像this ......但是當你嘗試平移或或縮小一個鼠標滾輪點擊放大，它跳到this

我試圖限制碼只是投影和縮放邏輯波紋管。

<body> 
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script> 
    <script src="//d3js.org/topojson.v1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <div id = "map" style = "float : left; min-width:320px;width :50%;height : 600px;"></div> 
    <script> 

    var width = 900, 
    height = 800; 

    var projection = d3.geo.mercator() 
    .center([-73.94, 40.70]) 
    .scale(75000) 
    .translate([(width/2), (height/2)]); 

    var svg = d3.select("#map").append("svg") 
    .attr("viewBox", "0 0 900 800") 
    .attr("preserveAspectRatio", "xMidYMid meet"); 

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

    var g = svg.append("g") 
    .attr("transform", "translate(-793.0489643729818,-630.1796382734433)scale(3.01487286910262)"); 

    d3.json("ny.json", function(error, ny) { 
    g.append("path") 
    .attr("id", "boroughs") 
    .datum(topojson.feature(ny, ny.objects.boroughs)) 
    .attr("d", path); 

// zoom and pan 
var zoom = d3.behavior.zoom() 
    .on("zoom",function() { 
     g.attr("transform","translate("+ 
      d3.event.translate.join(",")+")scale("+d3.event.scale+")"); 
     g.selectAll("path") 
      .attr("d", path.projection(projection)); 
    }); 

svg.call(zoom) 

    });

來源

2017-05-06 Kevin Young

shape文件從這裏下載：http://www1.nyc.gov/site/planning/data-maps/open-data/districts-download-metadata.page 然後，我mapshaper將它轉換 –

你能將'ny.json'文件發佈到某個地方，以便我們可以重新創建您的問題？我喜歡用[jsonblob]（https://jsonblob.com/）... – Mark

@Mark啊！我試圖在網上使用json編輯器，但它似乎太大...在這裏你去：https://jsonblob.com/96ada11e-3285-11e7-ae4c-4b5e1959573f –

我相信你的問題是你爲g設置初始縮放和翻譯值，然後在縮放時重置它們。爲了擴大規模，例如：

您可以設置爲g 3.01分至開始：

var g = svg.append("g") 
    .attr("transform", "translate(-793.0489643729818,-630.1796382734433)scale(3.01487286910262)");

然而，第一次用d3.event放大，它會回到0.607或1.647（縮小，放大）兩者都相對縮小到3.01：

g.attr("transform","translate("+ 
    d3.event.translate.join(",")+")scale("+d3.event.scale+")");

這將創建你所看到的跳躍，因爲規模和翻譯被複位，從而獨立於你的初始值。我認爲翻譯值可以，但您可以在svg上調用它，而不是指定初始翻譯的g。

在任何情況下，在您的g上設置初始轉換可能會更容易，而不是使用投影來完成此操作（而不是使用投影和轉換的兩步中心和縮放）。這樣，您可以保持所有代碼不變，除了刪除設置初始g轉換的行以及修改投影之外。

來源

2017-05-06 18:18:32

這是有道理的，我的第一次嘗試是試圖玩從投影變量的翻譯值，但它似乎主要是猜測遊戲，我不能讓縮放在投影變量上正常工作。那就是當我開始試圖強迫它在「g」屬性上的時候......但是這就是我現在所處的位置。我很困擾如何獲得投影的翻譯屬性，以實際與我合作 –

嘿，我其實只是在你的塊配置文件中探索並碰到了你製作的這個東西http://bl.ocks.org/andrew -reid/9556697440f43f576ed79cd5c445910e 我注意到你正在使用topojson，它內部定義了一個邊界框，並且你從中獲得了比例。你認爲這種方法在這種情況下會對我有幫助嗎？ –

是的，這應該工作，投影參數是基於你的json設置的，然後你可以根據需要平移和縮放svg（或者你可以在導航地圖時修改投影，這是更苛刻的，但也可能是首選一些情況）。使用此方法後，d3v4提供了更直接的投影自動擬合（fitExtent和fitSize） –

D3初始縮放默認墨卡託投影尺度

回答

相關問題