index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content {
width: 840px;
margin: 20px auto;
padding: 40px;
text-align: center;
background-color: #ddd;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="graphicContainer"></div>
<div class="foo">foo</div>
<div class="content">content</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
var graphic = d3.select(".graphicContainer");
var currentWidth;
window.onresize = resize;
function resize() {
currentWidth = graphic.node().clientWidth;
d3.selectAll('.foo').remove();
drawMyChart(currentWidth);
};
function drawMyChart(currentWidth) {
if (currentWidth < 960) {
d3.select('.content').classed('hide', true);
} else {
d3.select('.content').classed('hide', false);
};
};
</script>