div重叠，尽管div的位置是相对的。

Question

我使用d3.js创建了一个图表：图表代码 我正在尝试将此图表放在网站中。网站链接 问题是一个div会溢出到另一个div，就像在网站上所看到的那样。我尝试将图表的位置从绝对定位改为相对定位，但无效。

可能是什么问题导致这种情况？有任何想法吗？

与网站相关的示例：我的代码（在此进行实验） 网站中使用的CSS和d3 JavaScript图表代码（所有内容都可以在上述fiddle链接中找到）：

'use strict';

var dataset = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

// let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd'];
let colors = ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a', 'white', 'white'];
var months = ['January - 2016', 'February - 2016', 'March - 2016', 'April - 2016', 'May - 2016', 'June - 2016', 'July - 2016', 'August - 2016', 'September - 2016', 'October - 2016', 'November - 2016', 'December - 2016'];
var dataWeeks = ["Week 1: 32<br>Week 2: 54<br>Week 3: 19<br>Week 4: 12", "Week 5: 22<br>Week 6: 14<br>Week 7: 12<br>Week 8: 03<br>Week 9:44", "Week 10: 14<br>Week 11: 11<br>Week 12: 23<br>Week 13:20 <br>Quarter 1 :25", "Week 14: 53<br>Week 15: 16<br>Week 16: 11 <br>Week 17:33", "Week 18: 52<br>Week 19: 22<br>Week 20: 12 <br>Week 21 :09 <br>Week 22:34", "Week 23: 59<br>Week 24: 87 <br>Week 25:36<br>Week 26:78<br>Quarter 2 :56<br>Half Yearly 1 :98", "Week 27: 69<br>Week 28: 33<br>Week 29: 11<br>Week 30: 65", "Week 31: 69<br>Week 32: 33<br>Week 33: 99<br>Week 34: 66<br>Week 35: 19", "Week 36: 84<br>Week 37: 16<br>Week 38: 66<br>Week 39: 11<br>Quarter 3 : 77", "Week 40: 86<br>Week 41: 21<br>Week 42: 52<br>Week 43: 12<br>Week 44: 37", "Week 45: 90<br>Week 46: 69<br>Week 47: 19<br>Week 48: 17", "Week 49:33 <br>Week 50:09 <br>Week 51:44 <br>Week 52 : 89<br>Quarter 4 :66<br>Half Yearly 2:99"];

var width = document.querySelector('.chart-wrapper').offsetWidth,
  height = document.querySelector('.chart-wrapper').offsetHeight,
  minOfWH = Math.min(width, height) / 2,
  initialAnimDelay = 300,
  arcAnimDelay = 150,
  arcAnimDur = 3000,
  secDur = 1000,
  secIndividualdelay = 150;

var radius = undefined;

// calculate minimum of width and height to set chart radius
if (minOfWH > 200) {
  radius = 200;
} else {
  radius = minOfWH;
}

// append svg
var svg = d3.select('.chart-wrapper').append('svg').attr({
  'width': width,
  'height': height,
  'class': 'pieChart'
}).append('g');

svg.attr({
  'transform': 'translate(' + width / 2 + ', ' + height / 2 + ')'
});

// for drawing slices
var arc = d3.svg.arc().outerRadius(radius * 0.6).innerRadius(radius * 0.45);

// for labels and polylines
var outerArc = d3.svg.arc().innerRadius(radius * 0.85).outerRadius(radius * 0.85);

// d3 color generator
// let c10 = d3.scale.category10();

var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

var pie = d3.layout.pie().value(function(d) {
  return d;
});

var draw = function draw() {

  svg.append("g").attr("class", "lines");
  svg.append("g").attr("class", "slices");
  svg.append("g").attr("class", "labels");

  // define slice
  var slice = svg.select('.slices').datum(dataset).selectAll('path').data(pie);
  slice.enter().append('path').attr({
    'fill': function fill(d, i) {
      return colors[i];
    },
    'd': arc,
    'stroke-width': '25px'
  }).attr('transform', function(d, i) {
    return 'rotate(-180, 0, 0)';
  }).style('opacity', 0).transition().delay(function(d, i) {
    return i * arcAnimDelay + initialAnimDelay;
  }).duration(arcAnimDur).ease('elastic').style('opacity', 1).attr('transform', 'rotate(0,0,0)');

  slice.transition().delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).duration(secDur).attr('stroke-width', '5px');

  var midAngle = function midAngle(d) {
    return d.startAngle + (d.endAngle - d.startAngle) / 2;
  };

  var text = svg.select(".labels").selectAll("text").data(pie(dataset));

  text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).attr("cursor", "default").style('fill', function(d, i) {
    return colors[i];
  }).text(function(d, i) {
    return months[i];
  }).attr('transform', function(d) {
    // calculate outerArc centroid for 'this' slice
    var pos = outerArc.centroid(d);
    // define left and right alignment of text labels
    pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1);
    return 'translate(' + pos + ')';
  }).style('text-anchor', function(d) {
    return midAngle(d) < Math.PI ? "start" : "end";
  }).transition().delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).duration(secDur).style('opacity', 1);

  text.on("mousemove", function(d, i) {
    tooltip.html(dataWeeks[i])
      .style('top', d3.event.pageY - 6 + 'px')
      .style('left', d3.event.pageX + 14 + 'px')
      .style("opacity", 1);
  }).on("mouseout", function(d) {
    tooltip.style("opacity", 0);
  });


  var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset));

  polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) {
    var pos = outerArc.centroid(d);
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
    return [arc.centroid(d), arc.centroid(d), arc.centroid(d)];
  }).transition().duration(secDur).delay(function(d, i) {
    return arcAnimDur + i * secIndividualdelay;
  }).attr('points', function(d) {
    var pos = outerArc.centroid(d);
    pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
    return [arc.centroid(d), outerArc.centroid(d), pos];
  });
};

draw();

var button = document.querySelector('button');

var replay = function replay() {

  d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
  d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
  d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();

  setTimeout(draw, 800);
};

.chart-wrapper {
  width: 100%;
  height: 100%;
  background-color: #0d0d0d;
  position: relative;
}
path {
  stroke: #0d0d0d;
  /* stroke-width: 5px; */
  cursor: pointer;
  -webkit-transition: fill 250ms;
  transition: fill 250ms;
}
path:hover {
  /* stroke-width: 10px; */
  fill: #fff;
}
text {
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .5px;
}
polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 5px;
}
button {
  position: realtive;
  top: 20px;
  left: 820px;
  text-transform: uppercase;
  padding: 5px 10px;
  outline: none;
  font-size: .6em;
  background-color: black;
  color: #fff;
  border: 1px solid #fff;
  letter-spacing: 1px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
button:hover {
  background-color: #fff;
  color: #0d0d0d;
  box-shadow: 0 0 2px #fff;
}
button:active {
  opacity: 0.5;
}
div.tooltip {
  position: realtive;
  padding: 4px;
  background: white;
  border: 1px solid black;
  border-radius: 2px;
  font-size: 14px;
}

- jane

---

你尝试给容器设置相对位置了吗？ - Basilin Joe

@CodeBean 尝试了，但没有成功。谢谢。 - jane

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - sheetal

是的，总是这样... @sheetal 谢谢。 - jane

在浏览器中将其设置为相对位置时，一切都很好...我猜是CSS被覆盖了，尝试在位置样式中添加!important。你之前试过吗？ - sheetal

@sheetal，感谢您的回复。不起作用，还没有运气。这是示例链接：https://jsfiddle.net/jn1ba77s/2/。 - jane

Answer 1

从 chart-wrapper 中完全删除 position css 属性。

.chart-wrapper {
  width: 100%;
  height: 100%;
  background-color: #0d0d0d;
}

编辑chart-wrapper的父级并添加自定义高度。您可以调整高度以使其正确适合。

<div class="container" style="height:700px;">

我通过Chrome开发者工具的CSS管理器在您的网站上进行了相同的测试。它不再重叠并正确地显示。

- ArunTejCh

---

@TeRml 感谢您的输入。我尝试了您刚才说的方法，但没有帮助。请看这里：https://jsfiddle.net/jn1ba77s/3/ - jane

看起来你的浏览器正在缓存旧的CSS文件。只需通过删除缓存文件进行硬重载即可。您可以使用Ctrl + Shift + Del清除缓存。只要小心不要删除任何保存的密码或填写的字段。 - ArunTejCh

@jane - 问题在于每个人似乎都试图在浏览器控制台中解决此问题，但SVG是动态创建的，在页面加载时不存在。您根据父级.chart-wrapper设置SVG的宽度和高度，但当该元素在第一次页面加载时没有特定的position: absolute时，它没有高度，因此无法工作。事实上，当您在浏览器控制台中更改值后，SVG生成后当然可以工作，但在您的网站上无法工作。 - adeneo

是的，我同意adeneo的观点。仅仅移除绝对定位只能解决问题的一部分。你必须改变chart-wrapper div的可用高度。 - ArunTejCh

太棒了。我搞定了。现在它运行得很好。谢谢大家。上帝保佑。 - jane

Answer 2

您需要移除 "position: absolute;" 在 ".chart-wrapper" 中的部分。

- D. Fraga

---

我已经尝试过了。这个fiddle链接会告诉您将位置更改为相对位置是不起作用的：https://jsfiddle.net/jn1ba77s/，无论如何感谢@D.Fraga的输入。 - jane