I'm displaying the word cloud inside a div container. But as you can see the svg is not centered.
Does anyone know how to fix this issue?
Here is my code (based on Julien Renaux solution)
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<style>
#wordcloud {width: 1000px; height: 600px; border: 1px solid red}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
<script type="text/javascript" src="bower_components/d3-cloud/d3.layout.cloud.js"></script>
<script type="text/javascript" src="tags.js"></script>
</head>
<body>
<div id="wordcloud">
</div>
<script>
var fill = d3.scale.category20b();
var w = $('#wordcloud').innerWidth(), h = $('#wordcloud').innerHeight();
var svg_location = "#wordcloud";
var fontSize;
var layout = d3.layout.cloud()
.timeInterval(Infinity)
.size([w, h])
.fontSize(function(d) {
return fontSize(+d.value);
})
.text(function(d) {
return d.key;
})
.on("end", draw);
var svg = d3.select(svg_location).append("svg")
.attr("width", w)
.attr("height", h);
var vis = svg.append("g").attr("transform", "translate(" + [w >> 1, h >> 1] + ")");
update();
if(window.attachEvent) {
window.attachEvent('onresize', update);
}
else if(window.addEventListener) {
window.addEventListener('resize', update);
}
function draw(data, bounds) {
var w = window.innerWidth,
h = window.innerHeight;
// ***
svg.remove();
svg = d3.select(svg_location).append("svg")
.attr("width", w)
.attr("height", h);
vis = svg.append("g").attr("transform", "translate(" + [w >> 1, h >> 1] + ")");
// ***
svg.attr("width", w).attr("height", h);
scale = bounds ? Math.min(
w / Math.abs(bounds[1].x - w / 2),
w / Math.abs(bounds[0].x - w / 2),
h / Math.abs(bounds[1].y - h / 2),
h / Math.abs(bounds[0].y - h / 2)) / 2 : 1;
var text = vis.selectAll("text")
.data(data, function(d) {
return d.text.toLowerCase();
});
text.transition()
.duration(1000)
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.style("font-size", function(d) {
return d.size + "px";
});
text.enter().append("text")
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.style("font-size", function(d) {
return d.size + "px";
})
.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);
text.style("font-family", function(d) {
return d.font;
})
.style("fill", function(d) {
return fill(d.text.toLowerCase());
})
.text(function(d) {
return d.text;
});
vis.transition().attr("transform", "translate(" + [w >> 1, h >> 1] + ")scale(" + scale + ")");
}
function update() {
layout.font('impact').spiral('archimedean');
fontSize = d3.scale['sqrt']().range([10, 100]);
if (tags.length){
fontSize.domain([+tags[tags.length - 1].value || 1, +tags[0].value]);
}
layout.stop().words(tags).start();
}
function changeWords(newTags) {
tags = newTags;
update();
}
</script>
</body>
</html>
Thanks for any help.
