From 8123fdaa559a7e589db770b57a0b2ba702df878b Mon Sep 17 00:00:00 2001 From: e <401840614@qq.com> Date: Tue, 20 Jun 2017 11:31:28 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=90=8E=E5=8F=B0=E8=AF=B7?= =?UTF-8?q?=E6=B1=82=E5=9C=B0=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + index.js | 290 +++++++++++++++------------------------------- src/css/index.css | 6 +- 3 files changed, 99 insertions(+), 198 deletions(-) diff --git a/index.html b/index.html index 7f6a325..bbe980d 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ Document +
diff --git a/index.js b/index.js index c36e696..5ecc9d8 100644 --- a/index.js +++ b/index.js @@ -1,242 +1,142 @@ -import './src/css/index.css'; -// import 'nprogress/nprogress.css' -import 'normalize.css'; -import 'pure-css-loader/dist/css-loader.css' +import './src/css/index.css'; //主要样式表 +import 'normalize.css'; //css reset +import 'pure-css-loader/dist/css-loader.css' //css-loading 样式 -// import nprogress from "nprogress"; -import d3 from "./src/js/d3.min.js" +import d3 from "./src/js/d3.min.js" import cloud from "d3-cloud"; -import { word } from "./src/js/arr.js" -import axios from "axios" +import axios from "axios"; +var fill = d3.scale.category20(); +var loader = d3.select('.loader'); //css loader +var msg = ['服务器君tm射爆卡 (╯‵□′)╯︵┻━┻', '你快回来，把我的数据还回来(⊙ˍ⊙)', '假猪套天下第一 🐷', '把他娘的意大利....面拿出来 ?ω?', '我反手就是一个....小心心你要吗💗'] + var fill = d3.scale.category20(); -var loader=d3.select('.loader'); //css loader -var msg=['服务器君tm射爆卡 (╯‵□′)╯︵┻━┻','你快回来，把我的数据还回来(⊙ˍ⊙)','假猪套天下第一 🐷','把他娘的意大利....面拿出来 ?ω?','我反正就是一个....小心心你要吗💗'] -// window.word=word +//构造词云容器svg元素 +var svg = d3.select('.svg-contain').append("svg") + .attr("width", 960) + .attr("height", 500) + .attr("transform", "translate(0,35)") + .append("g") + .attr("transform", "translate(480,250)"); + -// // Send a POST request document.querySelector(".btn-primary").onclick = function () { - request(document.querySelector('.text-input').value) + request(document.querySelector('.text-input').value) } -document.querySelectorAll(".singer-name").forEach(ele => ele.onclick = function () { request(ele.innerHTML) }) -let request = function (val) { - loader.classed('is-active', true) - .attr('data-curtain-text',msg[Math.floor(msg.length*Math.random())]) - axios({ - method: 'get', - url: 'http://112.74.111.33:3000/163', - params: { - name: val +{ + if (!NodeList.prototype.forEach) { + NodeList.prototype.forEach = Array.prototype.forEach; } - }).then(d => {document.querySelector(".svg-contain").innerHTML='';showNewWords(myWordCloud(d.data));loader.classed('is-active', ()=>false)}) - .catch(() => {loader.classed('is-active', ()=>false);alert("没有此歌手")}); + document.querySelectorAll(".singer-name").forEach(ele => ele.onclick = function () { + request(ele.innerHTML) + }) } -// let reset = function (word) { -// // nprogress.start(); - -// cloud().size([950, 550]) -// .words(word.slice(0, Math.min(word.length, 250)).map(function (d, i) { -// return { text: d.key, size: d3.scale["log"]().range([10, 30])(d.value) }; -// })) -// .padding(5) -// .rotate(function () { return (~~(Math.random() * 6) - 3) * 30; }) -// .font("Impact") -// .fontSize(d => d.size) -// .on("end", draw) -// .start(); -// // nprogress.done(); - -// } - - -// function draw(word) { -// var svg = d3.select(".svg-contain").append("svg") -// .attr("width", 960) -// .attr("height", 600) -// .append("g") -// .attr("transform", "translate(480,280)") - - -// var clouder = svg.selectAll("g text") -// .data(word, function (d) { return d.text; }) - -// // .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; }); -// function transition() { -// clouder.enter() -// .append("text") -// .style("font-family", "Impact") -// .style("fill", function (d, i) { return fill(i); }) -// .attr("text-anchor", "middle") -// .attr('font-size', 1) -// .text(function (d) { return d.key; }); - - -// clouder -// .transition() -// .duration(600) -// .style("font-size", function (d) { return d.size + "px"; }) -// .attr("transform", function (d) { -// return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; -// }) -// .style("fill-opacity", 1); - - -// //Exiting words -// clouder.exit() -// .transition() -// .duration(200) -// .style('fill-opacity', 1e-6) -// .attr('font-size', 1) -// .remove(); - -// } -// return { -// update(word) { -// cloud().size([950, 550]) -// .words(word.slice(0, Math.min(word.length, 250)).map(function (d, i) { -// console.log(d) -// return { text: d.key, size: d3.scale["log"]().range([10, 2000])(d.value) }; -// })) -// .padding(5) -// .rotate(function () { return (~~(Math.random() * 6) - 3) * 30; }) -// .font("Impact") -// .fontSize(d => d.size) -// .on("end", transition) -// .start(); -// } -// } -// } - -//--------------------------------------------------------------------------------------------------------------------------------- - - -function wordCloud(selector,words) { - - - var fill = d3.scale.category20(); - - - //Construct the word cloud's SVG element - var svg = d3.select(selector).append("svg") - .attr("width", 960) - .attr("height", 500) - .attr("transform", "translate(0,50)") - .append("g") - .attr("transform", "translate(480,250)"); - - - - - //Draw the word cloud +let request = function (val) { + loader.classed('is-active', true) + .attr('data-curtain-text', msg[Math.floor(msg.length * Math.random())]) + axios({ + method: 'get', + url: 'https://kspider.nbsaw.com/163', + params: { + name: val + } + }).then(d => { + showNewWords(wordCloud(), d.data); + }) + .catch(() => { + loader.classed('is-active', () => false); + alert("没有此歌手") + }); +} + + + +function wordCloud(selector) { + //画出词云函数 + function draw(words) { var cloud = svg.selectAll("g text") - .data(words, function(d) { return d.text; }) - //Entering words + .data(words, function (d) { + return d.text; + }) + /** + * 给每个词赋上css属性，添加进容器里 + */ cloud.enter() .append("text") .style("font-family", "Impact") - .style("fill", function(d, i) { return fill(i); }) + .style("fill", function (d, i) { + return fill(i); + }) .attr("text-anchor", "middle") .attr('font-size', 1) - .text(function(d) { return d.text; }) - + .text(function (d) { + return d.text; + }) - //Entering and existing words + + //词云入场动画 cloud.transition() - .duration(600) - .style("font-size", function(d) { return d.size + "px"; }) - .attr("transform", "transform: translate(0,0)") - .attr("transform", function(d) { - return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; - }) - .style("fill-opacity", 1); + .duration(600) + .style("font-size", function (d) { + return d.size + "px"; + }) + .attr("transform", "transform: translate(0,0)") + .attr("transform", function (d) { + return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; + }) + .style("fill-opacity", 1); + - //Exiting words cloud.exit() .transition() - .duration(200) - .style('fill-opacity', 1e-6) - .attr('font-size', 1) - .remove(); + .duration(200) + .style('fill-opacity', 1e-6) + .attr('font-size', 1) + .remove(); } - - - - //Use the module pattern to encapsulate the visualisation code. We'll - // expose only the parts that need to be public. + + return { - - - //Recompute the word cloud for a new set of words. This method will - // asycnhronously call draw when the layout has been computed. - //The outside world will need to call this function, so make it part - // of the wordCloud return value. - update: function(words) { - cloud().size([960, 500]) + + update: function (words) { + cloud().size([960, 500]) .words(words) .padding(5) - .rotate(function () { return (~~(Math.random() * 6) - 3) * 30; }) + .rotate(function () { + return (~~(Math.random() * 6) - 3) * 30; + }) .font("Impact") - .fontSize(function(d) { return d.size; }) + .fontSize(function (d) { + return d.size; + }) .on("end", draw) .start(); + + loader.classed('is-active', () => false); } } } +function showNewWords(vis, word) { -//Some sample data - http://en.wikiquote.org/wiki/Opening_lines + vis.update(word.slice(0,Math.min(200,word.length)).map(function (d) { + return { + text: d.key, + size: d3.scale["log"]().range([10, 30])(d.value) + }; + })) -//Prepare one of the sample sentences by removing punctuation, -// creating an array of words and computing a random size attribute. -function getWords(i) { - // words[i] - // .replace(/[!\.,:;\?]/g, '') - // .split(' ') - return word.map(function(d) { - return {text: d.key, size:d3.scale["log"]().range([10, 30])(d.value)}; - }) } - -//This method tells the word cloud to redraw with a new set of words. -//In reality the new words would probably come from a server request, -// user input or some other source. -function showNewWords(vis, i) { - i = i || 0; - - - vis.update(getWords(i ++ % word.length)) - //setTimeout(function() { showNewWords(vis, i + 1)}, 2000) -} - - -//Create a new instance of the word cloud visualisation. -function myWordCloud(word){ - return wordCloud('.svg-contain',word); -} - -//Start cycling through the demo data - - diff --git a/src/css/index.css b/src/css/index.css index b66894a..25720ad 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -23,7 +23,7 @@ .middle-div { width: 960px; margin: 0 auto; - margin-top: 50px; + margin-top: 30px; } .middle-div .text-input { @@ -40,7 +40,7 @@ .svg-contain { position: relative; - margin-top: 15px; + margin-top: 32px; } @@ -55,7 +55,7 @@ } .middle-block { - margin-top: 30px; + margin-top: 14px; font-family: 'Microsoft YaHei'; }