Javascript 如何在d3云中创建每个单词的链接？_Javascript_D3.js_Tag Cloud

Javascript 如何在d3云中创建每个单词的链接？

javascript d3.js

Javascript 如何在d3云中创建每个单词的链接？,javascript,d3.js,tag-cloud,Javascript,D3.js,Tag Cloud,我正在使用构建一个单词云。以下是示例代码： <!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();

我正在使用构建一个单词云。以下是示例代码：

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


var fill=d3.scale.category20（）；
d3.layout.cloud（）.size（[300300]）
.words（[“This”、“is”、“some”、“random”、“text”]）。映射（函数（d）{
返回{text:d，size:10+Math.random（）*90}；
}))
.填充（5）
.rotate（函数（）{return~~（Math.random（）*2）*90；}）
.font（“影响”）
.fontSize（函数（d）{返回d.size；}）
.on（“结束”，抽签）
.start（）；
函数图（字）{
d3.选择（“正文”）.附加（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）
.附加（“g”）
.attr（“转换”、“翻译（150150）”）
.selectAll（“文本”）
.数据（字）
.enter（）.append（“文本”）
.style（“字体大小”，函数（d）{返回d.size+“px”；}）
.style（“字体系列”、“影响”）
.style（“fill”，函数（d，i）{返回fill（i）；}）
.attr（“文本锚定”、“中间”）
.attr（“转换”，函数（d）{
返回“translate（“+[d.x，d.y]+”）rotate（“+d.rotate+”）”；
})
.text（函数（d）{返回d.text；}）；
}

我想在每个单词上创建一个超链接（“This”、“is”、“some”、“random”、“text”）。因此，在单词云中，当我单击每个单词时，它会转到链接。 1）我如何处理每个单词？ 2）如果你能告诉我如何将云的大小改为800*300，而不是300*300，那就好了。正如我在第“d3.layout.cloud（）.size（[300300]）行中尝试更改它的大小一样，但没有任何帮助。文本从框中取出

希望你能理解我的问题

谢谢。

要使单词可单击，只需打开一个

（“单击”，函数（…）{…}）

侦听器，打开一个新选项卡。还可以向文本添加样式，使其看起来像链接。下面是一些代码：

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");
      });
}

这些属性应该由两个变量控制，以保持代码简单

要更改单词cloud的大小，您需要更改

.attr（“宽度”，300）

，

.attr（“高度”，300）

和

d3.layout.cloud（）.size（[300300]）

。我试过了。这很有帮助，但有时一半的文本会从盒子里出来，另一半留在盒子里。尝试更改宽度和高度变量。我更改了答案。@jennifer06262016现在已修复。有人移动了d3云，所以它坏了。谢谢你修理小提琴。这正是我所需要的。

d3.layout.cloud()
  .size([width, height])

d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  ...
  .attr("transform", "translate("+ width/2 +","+ height/2 +")")