如何从csv中使d3.js中的2种颜色分别代表正负词云

How to make 2 color represent positive and negative word cloud in d3.js from csv

本文关键字：颜色 2种 csv 中使 d3 中的 js      更新时间：2023-09-26

我有一个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中创建一个单词云，它的颜色必须是蓝色和红色。这个颜色取决于情绪是"积极的"还是"消极的"。

我现在拥有的单词cloud是黑色的。我怎样才能把它变成红色和蓝色？

这是我的编码：

<!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"); })

工作代码：http://jsfiddle.net/cyril123/y6fxbu9c/7/

相关文章：