麻煩D3js世界地圖和SVG組元素寬度

我是新來D3js我試圖創建一個使用這個的jsfiddle所示d3js麻煩D3js世界地圖和SVG組元素寬度

什麼，我想實現的是一個世界地圖世界地圖，它隨着瀏覽器的大小而調整，當你點擊一個國家時，一個新的彈出窗口會打開該國的地圖和一些附加信息。

如果我從更大的屏幕尺寸（1000px +）開始並且無論我的尺寸有多小，都可以完美調整大小，但是如果我先在小屏幕上加載頁面，則地圖加載不正確。我觀察到，出於某種原因，具有id「國家」的g元素始終以900+像素的寬度開始，並且不響應在內聯attrs中顯示的尺寸。我分配的尺寸顯示內聯attrs，但是計算寬度從別的東西開始，如果我在較小的屏幕上刷新瀏覽器，則不會調整爲屏幕大小。因此，如果我在較小的屏幕尺寸上加載頁面，則地圖顯示太大。如果我從一個大屏幕開始，並將窗口大小調整到較小的屏幕，它工作正常。不知道這裏發生了什麼事。有人可以解釋我如何做這項工作？

非常感謝您的幫助。

這裏是代碼

HTML：

< 

body> 
    <div class="container"> 
    <div class="row"> 
     <div id="map_container" class="col-xs-12"></div> 
     <div id="profile" class="col-xs-10"> 
     <div id="country_map" class="col-xs-4"></div> 
     <button type="button" class="close" aria-label="Close" id="close_map"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <div id="writeup" class="col-xs-8 of"> 
      <h1>Heading 1</h1> 
      <p> 
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, pariatur, quia! Suscipit voluptas, cumque esse numquam dolore quo maxime blanditiis unde ex pariatur id qui minima autem voluptates ducimus dicta.</span> 
      <span>Suscipit corporis ex, optio, et libero accusantium dolorum animi. Dolorem unde ratione quas facere eum dolore veritatis ad aliquam repudiandae id expedita minima numquam magnam necessitatibus tenetur nulla, esse soluta!</span> 
      <span>Voluptas consectetur totam debitis! Et velit alias, quod sed ut labore iusto assumenda numquam, voluptas repellat aliquam quis nemo maxime officiis sunt architecto minus fugit magnam explicabo deleniti voluptates! Accusantium.</span> 
      <span>Quisquam asperiores, voluptatibus quod incidunt facilis pariatur tenetur quae libero accusantium itaque modi nobis odio. Id pariatur eius doloremque, voluptatem tenetur repudiandae nulla enim sint consectetur vitae non, voluptatibus a.</span> 
      </p> 
     </div> 
     <div id="writeup2" class="col-xs-4"> 
      <h1>Heading 2</h1> 
      <p> 
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, pariatur, quia! Suscipit voluptas, cumque esse numquam dolore quo maxime blanditiis unde ex pariatur id qui minima autem voluptates ducimus dicta.</span> 
      <span>Suscipit corporis ex, optio, et libero accusantium dolorum animi. Dolorem unde ratione quas facere eum dolore veritatis ad aliquam repudiandae id expedita minima numquam magnam necessitatibus tenetur nulla, esse soluta!</span> 
      <span>Voluptas consectetur totam debitis! Et velit alias, quod sed ut labore iusto assumenda numquam, voluptas repellat aliquam quis nemo maxime officiis sunt architecto minus fugit magnam explicabo deleniti voluptates! Accusantium.</span> 
      <span>Quisquam asperiores, voluptatibus quod incidunt facilis pariatur tenetur quae libero accusantium itaque modi nobis odio. Id pariatur eius doloremque, voluptatem tenetur repudiandae nulla enim sint consectetur vitae non, voluptatibus a.</span> 
      </p> 
     </div> 
     <div class="col-xs-8 table-responsive of"> 
      <table class="table"> 
      <thead> 
       <tr> 
       <th>#</th> 
       <th>Firstname</th> 
       <th>Lastname</th> 
       <th>Age</th> 
       <th>City</th> 
       <th>Country</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td>1</td> 
       <td>Anna</td> 
       <td>Pitt</td> 
       <td>35</td> 
       <td>New York</td> 
       <td>USA</td> 
       </tr> 
       <tr> 
       <td>2</td> 
       <td>Bruce</td> 
       <td>Wayne</td> 
       <td>35</td> 
       <td>Gotham</td> 
       <td>USA</td> 
       </tr> 
       <tr> 
       <td>3</td> 
       <td>Clarke</td> 
       <td>Kent</td> 
       <td>35</td> 
       <td>Metroplis</td> 
       <td>USA</td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

CSS：

/*world map*/ 

#map_container, 
#country_map { 
    height: 80vh; 
    padding: 20px; 
} 

.graticule { 
    fill: none; 
    stroke: #777; 
    stroke-width: 0.5px; 
    stroke-opacity: 0.5; 
} 

.land { 
    fill: #222; 
} 

.boundary { 
    fill: none; 
    stroke: #fff; 
    stroke-width: 0.5px; 
} 

#profile { 
    height: 80vh; 
    background: white; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    display: none; 
    overflow: auto; 
} 

#country_map, 
#writeup { 
    height: 50%; 
    /*position: relative; 
    top: 0; 
    left: 0;*/ 
} 

#writeup2 { 
    height: 50%; 
} 

.of { 
    overflow: auto; 
} 

[tooltip]:before { 
    font-family: 'Roboto'; 
    font-weight: 600; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    background-color: #585858; 
    color: #fff; 
    content: attr(tooltip); 
    font-size: 12px; 
    visibility: hidden; 
    opacity: 0; 
    padding: 5px 7px; 
    margin-right: 10px; 
    position: absolute; 
    right: 100%; 
    bottom: 5%; 
    white-space: nowrap; 
} 

[tooltip]:hover:before, 
[tooltip]:hover:after { 
    visibility: visible; 
    opacity: 1; 
} 

div.toolTip p { 
    text-align: left; 
} 

.toolTip { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    position: absolute; 
    display: none; 
    width: auto; 
    height: auto; 
    background: none repeat scroll 0 0 white; 
    border: 0 none; 
    border-radius: 8px 8px 8px 8px; 
    box-shadow: -3px 3px 15px #888888; 
    color: black; 
    font: 12px sans-serif; 
    padding: 5px; 
    text-align: center; 
}

JS（已刪除從下面的代碼country_data，但它可以在的jsfiddle鏈接查看）：

$(function() { 


    var data, 
     map = document.getElementById("map_container"), 
     inital_width = map.offsetWidth,  
     map_width = map.offsetWidth, 
     map_height = map_width * .618, 
     color = d3.scale.category20c(), 
     xy = d3 
        .geo 
        .mercator() 
        .translate([map_width/2, 450]), 
     path = d3 
         .geo 
         .path() 
         .projection(xy), 
     svg = d3 
         .select('#map_container') 
         .append('svg:svg'), 
     countries = svg 
           .append('svg:g') 
           .attr('id', 'countries'); 
    /* World Map */ 
    function make_map(){ 
     console.log("here") 
     map_width = map.offsetWidth; 
     map_height = map_width*.618//map.offsetHeight; 

     console.log(map_height,map_width,inital_width) 

     svg 
      .attr("width",map_width * .9) 
      .attr("height",map_height * .9); 
     countries 
      .attr('width',map_width* .7) 
      .attr('height',map_height* .7) 
      .attr("transform", "scale(" + map_width/inital_width + ")"); 

     countries.selectAll('path') 
     .data(countries_data.features) 
     .enter() 
     .append('svg:path') 
     .attr('d', path) 
     .attr("class","country") 
     .attr('fill', "gray") 
    } 
    make_map(); 

    var country = d3.selectAll(".country"); 
    var div = d3.select("body").append("div") 
     .attr("class", "toolTip"); 

    country.on("mousemove",function(d){ 
     d3.select(this).attr({ 
      'fill':"lightblue" 
     }) 
     div.style("left", d3.event.pageX+10+"px"); 
     div.style("top", d3.event.pageY-25+"px"); 
     div.style("display", "inline-block"); 
     div.html(d.properties.name) 
    }) 

    country.on("mouseout",function(d){ 
     d3.select(this).attr({ 
      'fill': 'gray' 
     }) 
     div.style("display", "none"); 
    }) 

    var country_map_div = document.getElementById("country_map"), 
     profile = $('#profile'), 
     w2 = profile.width() * 4/12, 
     h2= profile.height() * .5, 
     close_map = d3.select("#close_map"), 
     xy2 = d3.geo.equirectangular(), 
     selection, 
     country_map = d3.select("#country_map") 
      .append('svg:svg') 
      .attr('width',w2) 
      .attr('height',h2) 
      .attr("id","country_map_svg"); 

    country.on("click", clicked); 

    function clicked(d){ 
     selection = d; 

     country_map.selectAll("path").remove(); 

     w2 = profile.width() * 4/12; 
     h2= profile.height() * .5; 

     var bounds = path.bounds(d), 
      dx = bounds[1][0] - bounds[0][0], 
      dy = bounds[1][1] - bounds[0][1], 
      x = (bounds[0][0] + bounds[1][0])/2, 
      y = (bounds[0][1] + bounds[1][1])/2, 
      scale = .9/Math.max(dx/w2, dy/h2), 
      translate = [w2/2 - scale * x, h2/2 - scale * y]; 

     country_map 
     .append("path") 
     .datum(d) 
     .attr('id',"c_map") 
     .attr("d",path) 
     .attr("fill",function(d) { return color(d.properties.name);}) 
     .attr("transform", "translate(" + translate + ")scale(" + scale + ")"); 
     profile.show(300); 
    } 

    close_map.on("click",function(d){ 
     profile.hide(); 
    }) 


    var win = d3.select(window);   
    win.on("resize", sizeChange); 

    function sizeChange(element,id) { 

     map_width = map.offsetWidth; 
     map_height = map_width * .618; 
     countries 
     .attr("transform", "scale(" + map_width/inital_width + ")") 
     .attr("height",map_height); 


     var bounds = path.bounds(selection), 
      dx = bounds[1][0] - bounds[0][0], 
      dy = bounds[1][1] - bounds[0][1], 
      x = (bounds[0][0] + bounds[1][0])/2, 
      y = (bounds[0][1] + bounds[1][1])/2, 
      w2 = $("#profile").width() *4/12, 
      h2 = $("#profile").height()*.5, 
      scale = .9/Math.max(dx/w2, dy/h2), 
      translate = [w2/2 - scale * x, h2/2 - scale * y]; 

     country_map.attr("width", w2) 
      .attr("height", h2) 
     country_map.select("path") 
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")"); 
} 

});

PS。提前將道路地圖所需的所有數據轉儲放在js頂部的道歉。我第一次使用jsfiddle，但無法確定如何將它放入單獨的js文件中。

來源

2017-08-09 commonsensei

已更新jsfiddle鏈接https://jsfiddle.net/7onjd1pf/7/ – commonsensei

第一次添加您的國家時，您不設置比例。所以，你使用默認的比例。 d3中墨卡託投影的默認比例是931/Tau（Tau =2π）。這需要地球的360度經度（或2π弧度）並將它們水平擴展到961個像素。這意味着地圖只能以961像素或更高的寬度（或960像素，這是bl.ocks.org的默認寬度）正確顯示。完全不管我怎麼走小

，如果我在一個更大的屏幕尺寸開始這工作得很好（1000像素+）和調整大小：這就解釋了這一說法。

您可以通過重新調整投影調整地圖的大小，而是通過直接修改SVG，這就是爲什麼調整大小的作品在這裏約1000

你需要設置你的投影像素寬度啓動時規模。你需要知道你想要的地圖寬度。它看起來像你想設置的svg的g寬度70％和變量map_width的svg在90％以上，所以你的規模是這樣的：

.scale(map_width/(Math.PI*2)*0.9*0.7)

這將包裹360°經線橫跨預期的像素數量。

請注意，您還應該更新投影的.translate屬性（當前例如y偏移量固定爲450px），因爲它也將與地圖寬度和高度有關 - 這將正確地將您的地圖居中窗戶。

這裏是更新的fiddle。

爲什麼你的彈出功能正確顯示？因爲你設置在下面的代碼規模（和範圍）：

var bounds = path.bounds(d), 
     dx = bounds[1][0] - bounds[0][0], 
     dy = bounds[1][1] - bounds[0][1], 
     x = (bounds[0][0] + bounds[1][0])/2, 
     y = (bounds[0][1] + bounds[1][1])/2, 
     scale = .9/Math.max(dx/w2, dy/h2),

您使用此正確設置投影，其中包括在最低限度，規模和翻譯的屬性。這就是爲什麼這部分代碼與基本映射不同的原因。

來源

2017-08-09 19:42:45

非常感謝你的解釋。我一直在想，它必須在規模上做些事情，但是您填寫的細節已經爲我澄清了問題和解決方案。感謝您的迴應。欣賞它:-) – commonsensei

更新我的更早的小提琴鏈接與變化，它現在按需運作。只有我必須做的其他更改是縮放svg而不是國家和更新寬度調整大小。非常感謝你爲我解決這個問題。 Cheerz – commonsensei

麻煩D3js世界地圖和SVG組元素寬度

回答

相關問題