DIV重疊的div另一個雖然位置相對

Question

我有使用d3.js圖表​​製作：code for chart

我試圖把一個網站內的這個圖表。 website

問題是一個div溢出另一個可以在網站上看到。 我試圖將圖表的位置從absolute改變爲relative。它不工作。

什麼可能是問題。爲什麼會發生這種情況？任何想法。

小提琴相關網站：My code so far（實驗這裏）

CSS和D3的JavaScript代碼圖表作爲網站（一切都在上面撥弄鏈接可用）使用：

'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; 
 
}

Answer 1

完全從圖表的包裝器

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

卸下位置的CSS屬性和編輯圖表的包裝器的父和添加自定義高度。您可以調整高度以使其適合正確。

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

我通過Chrome開發工具css manager在您的網站上測試了相同的內容。它不再重疊並坐好。

Answer 2

您必須刪除「位置：絕對;」的「.chart-wrapper「