How do I create link of each word in d3 cloud?
I am using D3 Cloud to build a word cloud. Here is the sample code:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../lib/d3/d3.js"></script>
<script src="../d3.layout.cloud.js"></script>
<script>
var fill = d3.scale.category20();
d3.layout.cloud().size([300, 300])
.words(["This", "is", "some", "random", "text"].map(function(d) {
return {text: d, size: 10 + Math.random() * 90};
}))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
d3.select("body").append("svg")
.attr("width", 300)
.attr("height", 300)
.append("g")
.attr("transform", "translate(150,150)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
</script>
I want to create a hyperlink on each of the words("This", "is", "some", "random", "text"). So in the word cloud, when I click on each of the words, it goes to the link. 1) How do I function on each word? 2) Bonus if you could tell me how to change the size of the cloud to 800*300 instead of 300*300. As I have tried to change it's size in line "d3.layout.cloud().size([300, 300])" but it doesn't help. The text goes out of the box.
Hope you understood my question.
Thanks.
Answer
To make the words clickable all you need to do is set an on.("click", function(...){...}) listener which opens a new tab. You can also add styling to the text to make it look like a link. Here is some code:
var words = [{"text":"This", "url":"http://google.com/"},
{"text":"is", "url":"http://bing.com/"},
{"text":"some", "url":"http://somewhere.com/"},
{"text":"random", "url":"http://random.org/"},
{"text":"text", "url":"http://text.com/"}]
for (var i = 0; i < words.length; i++) {
words[i].size = 10 + Math.random() * 90;
}
...
d3.layout.cloud()
...
.words(words)
...
.start();
function draw(words) {
...
d3.select("body")
.append("svg")
...
.enter()
.append("text")
...
.text(function(d) { return d.text; })
.on("click", function (d, i){
window.open(d.url, "_blank");
});
}
I changed the format to make the code more manageable. To change the width and height of the image you need to change three values:
d3.layout.cloud()
.size([width, height])
d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
...
.attr("transform", "translate("+ width/2 +","+ height/2 +")")
These attributes should be controlled by two variables to to keep the code simple.