javascript - 如何使2种颜色代表来自csv的d3.js中的正面和负面词云-6ren

javascript - 如何使2种颜色代表来自csv的d3.js中的正面和负面词云

转载作者：行者123 更新时间：2023-11-28 17:02:22

25

4

我有一个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/

25

4

0

文章推荐： python - Perforce - 创建和编辑更改列表

文章推荐： javascript - 通过范围 slider 旋转图像

文章推荐： JavaScript 回调在 Chrome 中运行不正常？

javascript - 检查用户名或电话是否已存在(正面)
我想知道我的前台表单上是否存在用户或电话，我不等待答案，而是等待告诉我去做的事情。我使用 Yup + Formik 来满足我的所有需求。在我的 Sequelize 后端，我设法显示用户名或电话是
Android:正面、负面和中性按钮之间的区别
肯定按钮、否定按钮和中性按钮之间是否存在功能差异，尤其是在 AlertDialogs 的上下文中？最佳答案只是他们在对话框中的位置...... 在 Honeycomb 之前的设备上，按钮顺序(从左
unit-testing - 正面、负面或模棱两可的单元测试消息？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
ssl - 正面 SSL 证书
我的客户买了一个 PositiveSSL 证书，他给了我 2 个文件，crt 和 ca-bundle。如何将这些文件安装到 ubuntu 服务器并使 https 协议(protocol)工作？仅供
python-3.x - 句子的情感分析 - 正面，负面和中性
我正在使用 NLTK 在 Python 中设计一个文本分类器。每个句子中考虑的特征之一是它的情绪。我想比那些没有任何情绪的句子(中性句子)更加权具有积极或消极情绪的句子。使用电影评论语料库和朴素贝叶斯
python - Plotly.py : fill to zero, 正面/负面的不同颜色
使用 Plotly，我可以轻松绘制单条线并填充该线和 y == 0 之间的区域: import plotly.graph_objects as go fig = go.Figure() fig.add
java - 模拟抛硬币得到 2 正面 3 反面 (Java)
(注意:有一些类似的问题，但我找不到完全重复的问题) 问题考虑抛硬币任意次数。在得到 3 个反面之前得到 2 个正面的概率是多少？代码为了模拟这一点，我设置了 10000000 次试验，其中 0
javascript - 将图像(正面-背面)映射到三个 js 中的球体
我有一个关于三个 JS 的问题。 fiddle https://jsfiddle.net/syildiz/fk8thLsq/17/ 我想创建一个跟随鼠标移动的眼睛。我上传的图片同时在背景中可见，并且在
javascript - Countup.js 颜色数按语句(正面、中性、负面)
我想将 countup.js 与自动 css 格式(颜色)相结合。我有以下三个条件的地方: 如果小于 0 则为红色如果等于 0 则为黑色如果大于 0 则为绿色 sample file包含三个数字(
ruby - 正面/负面和展望 future /展望 future 的困惑？
s = "some {text|in|braces} found" 获取大括号之间的内容 s.scan(/(? ["text|in|braces"] 现在要获取不在大括号中的内容，我试过了 s.sca
java - 在 C# 中使用斯坦福 NLP 库，在尝试获取情绪(正面/负面)时，它总是返回 -1!知道为什么吗？
我正在尝试使用 Stanford Core NLP 检查一个陈述是肯定的还是否定的。我在网上找到了一些 Java 引用资料，并且能够将缺失的部分转换/编码为 C#。在尝试获取情绪分数时 - 我总是

首页

博学

6Ren·AI

商城

javascript - 如何使2种颜色代表来自csv的d3.js中的正面和负面词云

首页

博学

6Ren·AI

商城

javascript - 如何使2种颜色代表来自csv的d​​3.js中的正面和负面词云

javascript - 如何使2种颜色代表来自csv的d3.js中的正面和负面词云