时间戳

首页 > 解决方案 > 问题定位 HTML div 下面的 SVG 附加到 HTML 的“正文”

javascript - 问题定位 HTML div 下面的 SVG 附加到 HTML 的“正文”

问题描述

我的 HTML 正文中有包含地图的 div。在我的 HTML 正文中还有脚本，我在其中将 d3 SVG 画布（另一个地图！）附加到 HTML 正文。所以，两个元素——用 HTML 创建的 div——和用 javascript d3 创建的 SVG。

问题是我似乎无法将 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>

传单地图进入#map HTML div，虽然我没有在这里展示。我想我的问题与如何操纵 HTML div 相对于 SVG d3 元素的位置有关，因为 SVG 元素和地图 DIV 正在以两种不同的方式插入 HTML 正文。照原样，地图 DIV 位于 SVG 之上，我希望地图 DIV 位于其下方。谢谢大家 - 抱歉，但我是 HTML 和 d3.js 的初学者！

标签： javascripthtmld3.jsdomleaflet

解决方案

推荐阅读