Question

我正在尝试模仿由Jason Davies创建的d3字云，但我遇到了问题。当我运行我的代码时，不会显示云。请检查下面的代码。我会很高兴任何帮助。谢谢。

<script src="d3/d3.js"></script>
<script src="d3/d3.layout.cloud.js"></script>
<script>
(function() {
var fill = d3.scale.category20();
var layout = d3.layout.cloud()
    .size([500, 500])
    .words(["form"].map(function(d) {
      return {text: d, size: 10 + Math.random() * 90, test: "haha"};
    }))
    .padding(5)
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .on("end", draw);
layout.start();
function draw(words) {
  d3.select("body").append("svg")
      .attr("width", layout.size()[0])
      .attr("height", layout.size()[1])
    .append("g")
      .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
    .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>

body {
  position: relative;
  font-family: "Helvetica Neue", sans-serif;
  width: 960px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 1em;
}
#presets a { border-left: solid #666 1px; padding: 0 10px; }
#presets a.first { border-left: none; }
#keyword { width: 300px; }
#fetcher { width: 500px; }
#keyword, #go { font-size: 1.5em; }
#text { width: 100%; height: 100px; }
p.copy { font-size: small; }
#form { font-size: small; position: relative; }
hr { border: none; border-bottom: solid #ccc 1px; }
a.active { text-decoration: none; color: #000; font-weight: bold; cursor: text; }
#angles line, #angles path, #angles circle { stroke: #666; }
#angles text { fill: #333; }
#angles path.drag { fill: #666; cursor: move; }
#angles { text-align: center; margin: 0 auto; width: 350px; }
#angles input, #max { width: 42px; }

<html>
<head>
<meta charset="utf-8">
<title>Word Cloud Generator</title>
</head>
  <body>
<div id="vis">
	<svg width="960" heigth="600"></svg>
</div>
<form id="form">

<p style="position: absolute; right: 0px; top: 0px; display: none;" id="status">244/250</p>

<div style="text-align: center">
  <div id="presets"></div>
  <div id="custom-area">
    <p><label for="text">Enter a URL below, or paste some text.</label>
    </p><p><textarea id="text"></textarea>
    <button id="go" type="submit">Go!</button>
  </p></div>
</div>

<hr>

<div style="float: right; text-align: right">
  <p><label for="max">Number of words:</label> <input type="number" value="250" min="1" id="max">
  </p><p><label for="per-line"><input type="checkbox" id="per-line"> One word per line</label>
  <!--<p><label for="colours">Colours:</label> <a href="#" id="random-palette">get random palette</a>-->
  </p><p><label>Download:</label>
    <a id="download-svg" href="#" target="_blank">SVG</a>
    <a id="download-png" href="#" target="_blank">PNG</a>
</p></div>

<div style="float: left">
  <p><label>Spiral:</label>
    <label for="archimedean"><input type="radio" name="spiral" id="archimedean" value="archimedean" checked="checked"> Archimedean</label>
    <label for="rectangular"><input type="radio" name="spiral" id="rectangular" value="rectangular"> Rectangular</label>
  </p><p><label for="scale">Scale:</label>
    <label for="scale-log"><input type="radio" name="scale" id="scale-log" value="log" checked="checked"> log n</label>
    <label for="scale-sqrt"><input type="radio" name="scale" id="scale-sqrt" value="sqrt"> √n</label>
    <label for="scale-linear"><input type="radio" name="scale" id="scale-linear" value="linear"> n</label>
  </p><p><label for="font">Font:</label> <input type="text" id="font" value="Impact">
</p></div>

<div id="angles">
<p><input type="number" id="angle-count" value="5" min="1"> <label for="angle-count">orientations</label>
    <label for="angle-from">from</label> <input type="number" id="angle-from" value="-60" min="-90" max="90"> °
    <label for="angle-to">to</label> <input type="number" id="angle-to" value="60" min="-90" max="90"> °
</p>
</div>

<hr style="clear: both">

<p style="float: right"><a href="about/">How the Word Cloud Generator Works</a></p>
<p style="float: left">Copyright © <a href="http://www.jasondavies.com/">Jason Davies</a> 2014.  The generated word clouds may be used for any purpose.</p>
</form>
</body>
</html>

Answer 1

您的问题出在：

<script src="d3/d3.js"></script>

下载d3.min.js并替换：

<script src="d3/d3.min.js"></script>

创建D3词云

1 个答案: