html body里放div被隐藏,在附加到HTML“body”的SVG下面定位HTML div时出现问题

我的HTML主体中有div,它包含一个映射。HTML的主体部分还有脚本,我在其中附加了一个D3SVG画布(另一个地图!)到HTML正文。所以,有两个元素-用HTML创建的div-和用javascript d3创建的SVG。

问题是,我似乎无法将HTML div放在页面上SVG的下面。我的代码如下:

Text

Random text

// 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");

}