如何使2种颜色分别表示来自CSV的d3.js中的正负词云
[英]How to make 2 color represent positive and negative word cloud in d3.js from csv
问题描述
我有一个csv文件
`[Name,Frequency,Sentiment hijacked,664,negative pay,267,negative gang,191,negative knives,120,negative planes,64,negative shut,60,negative police,60,negative russia,58,negative term,57,negative fulfil,55,negative agendas,55,negative malicious,55,negative unaccounted,55,negative misused,55,negative one,51,negative crashlands,48,negative two,43,positive befo,41,negative airpo,36,negative dam,36,negative shootout,36,positive following,35,positive ality,34,negative india,34,negative need,34,negative news,29,negative used,26,negative series,25,negative robbers,24,negative got,21,negative twitter,18,negative back,16,negative people,16,negative car,16,negative terrorists,16,negative purpose,16,negative think,15,negative]`
由3个数据组成：名称，频率和情感
我想在快速d3.js中创建一个词云，其颜色必须是蓝色和红色。 这种颜色取决于情绪是“正面”还是“负面”。
我现在所看到的词云是黑色。 如何使它变成红色和蓝色？
这是我的编码：
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Word Cloud~</title> <script src="d3.min.js" charset="utf-8"></script> <script src="d3.layout.cloud.js"></script> </head> <body> <script type="text/javascript"> var width = 1050, height = 800; var leaderScale = d3.scale.linear().range([30,90]); var fill = d3.scale.category20(); d3.csv("file.csv", function(data) { var leaders = data .map(function(d) {return { text: d.Name, size: +d.Frequency, sentiment: d.Sentiment }; }) .sort(function(a,b) { return d3.descending(a.size, b.size); }) .slice(0, 100); leaderScale.domain([ d3.min(leaders, function(d) { return d.size; }), d3.max(leaders, function(d) { return d.size; }) ]); d3.layout.cloud().size([width, height]) .words(loadWords()) .words(leaders) .padding(0) //.rotate(function() { return ~~(Math.random() * 2) * 90; }) .font("Impact") .fontSize(function(d) {return leaderScale(d.size); }) .on("end", drawCloud) .start(); function loadWords(leaders){ var word1 = { text: 'Name', size: 'Frequency', sentiment : 'Sentiment', //if(sentiment : 'positive') color:'#FF00FF' }; var word2 = { text: 'Name', size: 'Frequency', sentiment : 'Sentiment', //if(sentiment : 'negative') color:'#3498DB' }; return [word1,word2] } function fillColor(d,i){ return d.color; } function drawCloud(words) { console.log(words); d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate("+(width/2)+","+(height/2)+")") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function(d) { return d.size + "px"; }) .style("fill", function(d) { console.log(d); return (d.sentiment == "positive" ? "red" : "black"); }) .style("font-family", "Impact") .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [dx, dy] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); } }); </script> </body> </html>
1 个解决方案
解决方案1
1 2015-06-22 10:42:27
函数fillcolor将颜色设置为文本，但是我没有看到在任何地方设置d.color的颜色。
function fillColor(d,i){
return d.color;
}
编写文本时，您可以执行以下操作：
.style("fill", function(d) {
console.log(d);
return (d.sentiment == "positive" ? "red" : "black"); })
小提琴中的工作代码： http : //jsfiddle.net/cyril123/y6fxbu9c/7/
d3.js具有正值和负值的直方图
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.