Skip to content

Commit

Permalink
修改后台请求地址
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hazlank
Hazlank committed Jun 20, 2017
1 parent 4cf75de commit 8123fda
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 198 deletions.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
<header>
Expand Down
290 changes: 95 additions & 195 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -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


6 changes: 3 additions & 3 deletions src/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
.middle-div {
width: 960px;
margin: 0 auto;
margin-top: 50px;
margin-top: 30px;
}

.middle-div .text-input {
Expand All @@ -40,7 +40,7 @@

.svg-contain {
position: relative;
margin-top: 15px;
margin-top: 32px;
}


Expand All @@ -55,7 +55,7 @@
}

.middle-block {
margin-top: 30px;
margin-top: 14px;
font-family: 'Microsoft YaHei';
}

Expand Down

0 comments on commit 8123fda

Please sign in to comment.