我有一个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 个数据 Name、Frequency 和 Sentiment 组成
我想在快速 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(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) {
return d.text;
});
}
});
</script>
</body>
</html>最佳答案
函数 fillcolor 正在为文本设置颜色，但我没有看到任何地方可以设置 d.color 颜色。
function fillColor(d,i){
return d.color;
}
你可以在制作文本时做这样的事情:
.style("fill", function(d) {
console.log(d);
return (d.sentiment == "positive" ? "red" : "black"); })
fiddle 中的工作代码: http://jsfiddle.net/cyril123/y6fxbu9c/7/
关于javascript - 如何使2种颜色代表来自csv的d3.js中的正面和负面词云，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30977126/