Проблема позиционирования HTML-дива ниже SVG, добавленного к «телу» HTML - PullRequest
Новая
       14

Проблема позиционирования HTML-дива ниже SVG, добавленного к «телу» HTML

0 голосов
/ 20 октября 2018

У меня есть div в теле моего HTML, который содержит карту.Также в теле моего HTML есть скрипт, в котором я прикрепляю холст d3 SVG (еще одну карту!) К телу HTML.Итак, два элемента - div, созданный в HTML - и SVG, созданный в javascript d3.

Проблема в том, что я не могу разместить HTML-div под SVG на странице.Мой код выглядит следующим образом: 

<body>

<div class="container">  
    <!-- Title -->
    <h1 class="title has-text-centered">Text</h1>
    <h2 class="subtitle has-text-centered"></h2>

    <div class="columns">
      <div class="column is-half">
        <h2 class="subtitle has-text-centered" style="margin-left:-150px;"></h2>         
      </div>
     </div>
    <p class="subtitle is-5 has-text-centered" style="margin-top:0px">Random text</p>
</div>  
<!-- HTML map DIV -->
<div id="map" class="sf" style="width: 600px; height: 400px; margin-left: 250px" pointer-events="all"></div>

<script>
    // set up map
     var currentMap = d3.map();

     // load map data
     d3.queue()
        .defer(d3.csv, "data/statesProj.json", function(d) { 
        })
        .defer(d3.csv, "data/coworkingTenants_4.json", function(d) { 

        })
        .defer(d3.csv, "data/SFCounty_proj.json", function(c) { 
        })
        .defer(d3.csv, "data/SanFrancisco_CoWorkingTenants.json", function(cw) { 
        })
        .await(ready);

    function ready(error) {

    //load data to variable for d3 map
    var NationalData = coworkingTenantsNational.features
        console.log(NationalData)

    //predefine map height/width
    var width = 2070;
    var height = 600;

    // Create SVG and append to HTML body
    var svg = d3.select( "body" )
        .append( "svg" )
        .attr( "width", width )
        .attr( "height", height )
        .attr("class", 'subtitle is-5 has-text-centered')

    // Append empty placeholder g element to the SVG
    // g will contain geometry elements
    var g = svg.append( "g" );

    //projection
    var albersProjection = d3.geoAlbers()
        .scale( 1200)
        .rotate ( [98.5795,] )
        .center( [0, 39.8283] )

    //GeoPath
    var geoPath = d3.geoPath()
        .projection( albersProjection );

    //Draw the map in d3
    g.selectAll( "path" )
        .data( statesProj.features )
        .enter()
        .append( "path" )
        .attr( "fill", "black" )
        .attr( "d", geoPath )
        .attr("class","states");
     }

</script>


 </body>

Листовая карта входит в HTML-карту #map, хотя я здесь этого не показываю.Я предполагаю, что мой вопрос касается того, как манипулировать позицией HTML-элемента div относительно элемента SVG d3, учитывая, что элемент SVG и карта DIV вставляются в тело HTML двумя различными способами.Так как карта DIV находится сверху SVG, и я бы хотел, чтобы карта DIV располагалась под ней.Спасибо всем - извинения, но я немного новичок в HTML и d3.js!

...