Wie erstelle ich einen link, der jedes Wort in d3 cloud?

Ich bin mit D3 Cloud zu bauen, eine word cloud. Hier ist der Beispielcode:

<!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>

Ich einen hyperlink erstellen wollen, auf jedes der Worte("Das", "ist", "einige", "random", "text"). So in der word-cloud, wenn ich auf jedes der Worte, es geht um den link.
1) Wie kann ich die Funktion auf jedes Wort?
2) Bonus, wenn Sie mir sagen könnten, wie zur änderung der Größe der Wolke auf 800*300 statt 300*300. Als ich versucht habe, es zu ändern der Größe in der Zeile "d3.layout.cloud - ().Größe([300, 300]):" aber es hilft nicht. Der text geht aus der box.

Hoffe Sie verstehen meine Frage.

Dank.

  • Ändern Sie die Größe der word-cloud müssen Sie die änderung .attr("width", 300) , .attr("height", 300) und d3.layout.cloud().size([300, 300]).
  • Ich habe es versucht. Es hilft aber irgendwann die Hälfte des Textes geht aus der box und die andere Hälfte bleibt im inneren.
  • Blick auf die JSfiddle. Versuchen Sie, durch verändern der Breite und Höhe Variablen. Ich habe die Antwort.
InformationsquelleAutor user2798227 | 2013-12-20
Schreibe einen Kommentar