Question

我在包含地图的HTML正文中有div。在我的HTML主体中也有脚本，在该脚本中，我将d3 SVG画布（另一个映射！）粘贴到HTML主体。因此，有两个元素-用HTML创建的div-和用javascript d3创建的SVG。

问题是我似乎无法在页面上的SVG下方放置HTML div。我的代码如下：

<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>

单张地图进入#map HTML div中，尽管我不在此显示。我想我的问题涉及到如何操纵HTML div相对于SVG d3元素的位置，因为SVG元素和地图DIV是以两种不同的方式插入到HTML主体中的。照原样，地图DIV位于SVG的顶部，我希望地图DIV位于其下方。谢谢大家-道歉，但是我对HTML和d3.js还是有点初学者！

将HTML div定位在附加到HTML的“ body”的SVG下方时出现问题

0 个答案: