Word-Cloud using d3js
Question
I am trying to use d3js source code available on GitHub to plot WordCloud.
GitHub
My index.html file is as follows:
<html xmlns="html">
<head>
<title>Visualization Medley</title>
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="medley.css">
</head>
<body>
<div class="container">
<h3>Word Cloud</h3>
<div id="world-cloud"></div>
</div>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"/><\script>
<script type="text/javascript" src="C:/Users/xxx/Desktop/d3.layout.js"/><\script>
<script type="text/javascript" src="C:/Users/xxx/Desktop/medley.js"/>
<\script>
</body>
</html>
My d3.layout.js file contains following code:
Source Code
My medley.js source code:
Source Code
When I open my index.html file it doesn't show me the default wordcloud. Can anyone tell me where I am going wrong?
I have no prior experience in writing JavaScript/html codes.
1 answers
solution1
2 ACCPTED 2018-04-08 07:14:22
Here is a slightly modified version of your code which displays the cloud:
var fill = d3.scale.category20(); var layout = d3.layout.cloud() .size([500, 500]) .words([ "Hello", "world", "normally", "you", "want", "more", "words", "than", "this"].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(" + [dx, dy] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); }
<html xmlns="html"> <head> <title>Visualization Medley</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="medley.css"> </head> <body> <div class="container"> <h3>Word Cloud</h3> <div id="world-cloud"></div> </div> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"/></script> <script type="text/javascript" src="https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"/></script> </body> </html>
I first modify the dependency to jasondavies/d3-cloud to be:
<script type="text/javascript" src="https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"/></script>
And what's most likely the cause of the non-display of the graph is the call to the cloud, which should be:
var layout = d3.layout.cloud().size([500, 500]).words([...
instead of:
var layout = cloud().size([500, 500]).words([...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.