Question

我有一个d3动画包含在svg和div中，其中包含我想要一起显示的地图 - d3设计 位于顶部 地图本身。地图和svg都应该覆盖整个屏幕。

当我将地图的位置更改为absolute时，只会显示地图，并且d3动画会在其后面消失。当位置为relative时，即使不透明度设置为0.5，地图也会在svg后面消失。事实上，改变svg或body的不透明度并不会使地图可见。此外，将地图的z-index更改为10101010也不会使其可见。

如何让d3出现在地图上方？我不熟悉CSS，任何建议都将不胜感激。

以下是演示此问题的代码段以及完整代码：

// create data
var data = [];
for (var i=0; i < 108; i++) {
 data.push(i);
}

// Scale for radius
var xr = d3.scale
        .linear()
        .domain([0, 108])
        .range([0, 27]);

// Scale for random position
var randomPosition = function(d) {
    return Math.random() * 1280;
}


var tcColours = ['#FDBB30', '#EE3124', '#EC008C', '#F47521', '#7AC143', '#00B0DD'];
var randomTcColour = function() {
  return Math.floor(Math.random() * tcColours.length);
};


// SVG viewport
var svg = d3.select('body')
  .append('svg')
    .attr('width', 1280)
    .attr('height', 512);

    svg.append("text")
    .attr("x", 100)             
    .attr("y", 100)
    .attr("text-anchor", "middle")  
    .style("font-size", "36px") 
    .style('fill', 'white')
    .text("Lorem ipsum");



var update = function() {
    var baseCircle = svg.selectAll('circle');
    // Bind data
    baseCircle = baseCircle.data(data);

    // set the circles
    baseCircle.transition()
            .duration(40000)
            .attr('r', xr)
            .attr('cx', randomPosition)
            .attr('cy', randomPosition)
            .attr('fill', "none")
            .attr("stroke-width", 4)
            .style('stroke', tcColours[randomTcColour()])
 
    baseCircle.enter()
            .append('circle')
            .attr('r', xr)
            .attr('cx', randomPosition)
            .attr('cy', randomPosition)
            .attr('fill', "none")
            .attr("stroke-width", 4)
            .style('stroke', tcColours[randomTcColour()])
            .style('opacity', 1);


}


setTimeout(function () { update();
  //do something once
}, 500);

window.onload = function() { update(); setInterval(update, 50000); };

mapboxgl.accessToken = 'pk.eyJ1Ijoic29jaWFsYmljeWNsZXMiLCJhIjoiTlBhano1cyJ9.1k53PW_xMIrcu3TKku4Tzg';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

html, body, main {
            height: 100%;
            background-color: #130C0E;
            opacity: 0.5;
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        svg {
            width: 100%;
            height: 99%;
           /* gets rid of scrollbar */
        }

        #map { position:relative; top:0; bottom:0; width:100%; z-index: 10101010 }

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


<div id='map'></div>

Answer 1

首先，您没有为地图指定高度。这就是它没有出现的原因。一旦你这样做，你可以绝对定位两者，它们将显得重叠。

＆＃13;

// create data
var data = [];
for (var i = 0; i < 108; i++) {
  data.push(i);
}

// Scale for radius
var xr = d3.scale
  .linear()
  .domain([0, 108])
  .range([0, 27]);

// Scale for random position
var randomPosition = function(d) {
  return Math.random() * 1280;
}


var tcColours = ['#FDBB30', '#EE3124', '#EC008C', '#F47521', '#7AC143', '#00B0DD'];
var randomTcColour = function() {
  return Math.floor(Math.random() * tcColours.length);
};


// SVG viewport
var svg = d3.select('body')
  .append('svg')
  .attr('width', 1280)
  .attr('height', 512);

svg.append("text")
  .attr("x", 100)
  .attr("y", 100)
  .attr("text-anchor", "middle")
  .style("font-size", "36px")
  .style('fill', 'white')
  .text("Lorem ipsum");



var update = function() {
  var baseCircle = svg.selectAll('circle');
  // Bind data
  baseCircle = baseCircle.data(data);

  // set the circles
  baseCircle.transition()
    .duration(40000)
    .attr('r', xr)
    .attr('cx', randomPosition)
    .attr('cy', randomPosition)
    .attr('fill', "none")
    .attr("stroke-width", 4)
    .style('stroke', tcColours[randomTcColour()])

  baseCircle.enter()
    .append('circle')
    .attr('r', xr)
    .attr('cx', randomPosition)
    .attr('cy', randomPosition)
    .attr('fill', "none")
    .attr("stroke-width", 4)
    .style('stroke', tcColours[randomTcColour()])
    .style('opacity', 1);


}


setTimeout(function() {
  update();
  //do something once
}, 500);

window.onload = function() {
  update();
  setInterval(update, 50000);
};

mapboxgl.accessToken = 'pk.eyJ1Ijoic29jaWFsYmljeWNsZXMiLCJhIjoiTlBhano1cyJ9.1k53PW_xMIrcu3TKku4Tzg';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
  center: [-74.50, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
});

＆＃13;

html,
body,
main {
  height: 100%;
  background-color: #130C0E;
  opacity: 0.5;
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

svg {
  position: absolute;
  width: 100%;
  height: 99%;
  /* gets rid of scrollbar */
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


<div id='map'></div>

＆＃13;

将svg元素定位在div上

1 个答案: