第一次提交:smile:

构建项目

.gitignore

@@ -0,0 +1,2 @@
+build
+node_modules

index.js

@@ -0,0 +1,53 @@
+import './src/css/index.css';
+import 'nprogress/nprogress.css'
+import 'normalize.css';
+
+
+import nprogress from "nprogress";
+import d3 from "./src/js/d3.v3.min"
+import cloud from "d3-cloud";
+import { simple,word } from "./src/js/arr.js"
+
+
+  let fill = d3.scale.category20();
+
+
+ window.reset= function (word){
+      nprogress.start();
+      setTimeout(function(){
+        document.querySelectorAll('.svg-contain')[0].innerHTML='';
+      cloud().size([300, 300])
+      .words(word.map(function(d) {
+        return {text: d, size: 10 + Math.random() * 90};
+      }))
+      .rotate(function() { return ~~(Math.random() * 2) * 90; })
+      .font("Impact")
+      .fontSize(function(d) { return d.size; })
+      .on("end", draw)
+      .start();
+        nprogress.done();
+      },100)
+  }
+
+window.word=word;
+  function draw(words) {
+    let width=800;
+    d3.select(".svg-contain").append("svg")
+        .attr("width", width)
+        .attr("height", width)
+      .append("g")
+        .attr("transform", "translate(301,300)scale(2.0084033012390137,2.0084033012390137)")
+      .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; });
+  }
+
+reset(simple)

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "wordcloud",
+  "version": "1.0.0",
+  "description": "songs word Cloud",
+  "dependencies": {
+    "d3-cloud": "^1.2.4",
+    "loaders.css": "^0.1.2",
+    "normalize.css": "^7.0.0",
+    "nprogress": "^0.2.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.5.1",
+    "babel-preset-es2015": "^6.24.1",
+    "css-loader": "^0.28.3",
+    "file-loader": "^0.11.1",
+    "style-loader": "^0.18.1",
+    "webpack": "^2.6.1"
+  },
+  "scripts": {
+    "build": ".\\node_modules\\.bin\\webpack --watch --progress --p"
+  },
+  "keywords": [
+    "word",
+    "Cloud",
+    "keywords",
+    "Keywords analysis"
+  ],
+  "author": "nbsaw,hazlank",
+  "license": "MIT"
+}

src/css/index.css

@@ -0,0 +1,50 @@
+
+    .header-background {
+      background-color: #159957;
+      background-image: linear-gradient(120deg, #155799, #159957);
+      color: white;
+      padding: 1rem 0;
+      height: 200px;
+      text-align: center;
+      font-weight: 800;
+    }
+
+    .header-background p {
+      font-size: 67px;
+      word-spacing: 14px;
+      margin-top: 11px;
+      letter-spacing: 10px;
+    }
+
+    .header-background h3 {
+      opacity: 0.8;
+      font-size: 21px;
+    }
+
+    .middle-div {
+      width: 960px;
+      margin: 0 auto;
+      margin-top: 50px;
+    }
+
+    .middle-div .text-input {
+      margin-left: 10px;
+      width: 200px;
+      display: inline-block;
+    }
+
+    .contain-textarea {
+      margin-top: 10px
+    }
+
+
+    .svg-contain{
+      position: relative;
+      margin-top: 15px;
+    }
+
+    .svg-contain svg{
+      position: relative;
+      left: 50%;
+      margin-left: -300px
+    }