Javascript d3.js wordcloud中的条件词颜色填充

我创建了一个基于csv的d3.js单词云

在csv中，我有三列：

• word（word-唯一）
• 计数（单词在文本中出现的次数）
• 索引（这是计数高于平均值与低于平均值的值）

words.csv：

word    count   index
word1   457      239
word2   373      155
word3   76      -142
word4   345      127
word5   12      -206
word6   46      -172

我编写了以下代码（在youtube和jason davies的world cloud软件包的帮助下），它可以创建单词cloud，但我不知道如何根据索引更改单词的颜色

    <script>

    var width = 1500,
        height =400;

    var wordScale = d3.scale.linear().range([10,100]);

    var fill = d3.scale.category20c();
    d3.csv("words.csv", function(data) {  
        var subjects = data
            .map(function(d) {return {text: d.word, size: +d.count} })
            .sort(function(a,b) {return d3.descending (a.size, b.size); })
            .slice(0,100);

        wordScale.domain([
            d3.min(subjects, function(d) {return d.size; }),
            d3.max(subjects, function(d) {return d.size; }),
        ]);    

    // var layout = cloud()
        d3.layout.cloud().size([width, height])
        .words(subjects)
        .padding(1)
        .rotate(function() { return ~~(Math.random() * 2) * 0; })
        .font("Impact")
        .fontSize(function(d) { return wordScale(d.size); })
        .on("end", draw)
        .start();

    });

        function draw(words) {
          d3.select("#word-cloud").append("svg")
              .attr("width",width)
              .attr("height",height)
            .append("g")
              .attr("transform", "translate("+(width /2)+","+(height /2)+")")
              //where the center is
            .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; });
    }


        </script>


I need to change this line in the code `var fill = d3.scale.category20c();`

The goal would be that all words above the average (so positive index) are green and all words below the average (negative index) are grey. If  the transparency of the color/fill could be dependent on how much above or below the average the count is that would be amazing - but not necessary. 

    word    count   index   color
    word1   457      239    green
    word2   373      155    green
    word3   76      -142    grey
    word4   345      127    green
    word5   12      -206    grey
    word6   46      -172    grey

---

不幸的是，当我运行它时，没有显示任何内容（也没有错误消息）。

对于上面的代码，即；假设wordScale介于10和100之间：

在绘图函数中，在代码的

.append（“text”）

部分

按如下所示编辑填充函数。根据尺寸高于/低于中点（55），该值将变为绿色/灰色。请随意使用比以下硬编码颜色值更好的颜色值：

.style("fill", function(d) { return d.size >= 55 ? "green" : "grey";})

要满足您的其他要求，请在

填充

的正下方添加以下样式。这将设置相对于大小的不透明度（介于0.1和1之间）。同样，您可以根据需要调整这些值

.style("opacity", function(d) { return d.size / 100 })

如果进行这些编辑，还可以将

var fill

放在代码顶部

更新答案：

注意，我无法让Jason Davies在没有脚本错误的情况下远程加载，但没有时间进行调试。在他的脚本后向下滚动以获得实际答案。我还没有向这个添加任何旋转元素

---

！函数（a）{if（“object”==typeof exports&“undefined”！=typeof module）module.exports=a（）；else-if（“function”==typeof define&&define.amd）define（[]，a）；else{var b；b=“undefined”！=typeof global？global:“undefined”！=typeof self？self:this，b=b.d3 | | |（b.d3={}），b.layout={.layout（），b.cloud=a}）{var a{var a{var a；返回函数a（b，c，c，d）返回函数a（b，c，c，d）返回函数a（b，c，c，c，d）{a，c，c，d）{a（b，c，c，d，d）{a（b，c，c，c，d，d，（c）若若（c）若（b[g）a，c，{{b[g，{b，{b，{a，{var i，{a，a，a，a a，a，a，a，a，a，a，c，c，a，c，c，c，c，a，c，c，c，c，c，c，c，c，a，c，c，c，c，c，c，c，c，c，c，c，c，c，d，c，c，d，d，c，{{{{a，c，{（b，c，d）}返回c[g.出口]返回c[g.出口]返回c[g.出口}返回c.返回c[g]出口}为（var f）出口}为（var f）出口}为（var f）出口}为（var f）出口}为（var f）出口}为（var）为（var v=h.获取图像数据（0,0，（f>5，（f>5，o=0）o=b.y1-y1-b.y1-b.y1-b.y1-b.y0-0-0.y0.y0.y0.y0.y0.y0）0，b.y0，b.0.0.0，b.y0.0，b.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0，k=b.map（函数（a，D）{返回a.text=b.call（this，a，D），a.font=c.call（this，a，d），a.style=s.call（this，a，d），a.weight=x.call（this，a，d），a.rotate=y.call（this，a，d），a.size=~~e.call（this，a，d），a.padding=z.call（this，a，d），a}）.sort（函数（a，b）{返回b.size-a.size-a.size}）；返回e&&clearInterval（e），e=setInterval（l，0），l（），G}，G.stop=function（），返回e&&（clearInterval（e），e=null），返回函数长度{G}？（C=null==a？1/0:a，G）：C}，G.words=function（a）{返回参数.length？（B=a，G）：B}，G.size=function（B）{返回参数.length？（a=[+B[0]，+B[1]]，G）：a}，G.font=function（a）{返回参数.length？（C=v（a），G）：C}，G.fontStyle=function（a）{返回参数.length？（s=v（a），G）：s}，G.fontwweight=function（a）{返回参数{return arguments.length？（y=v（a），G）：y}，G.text=function（a）{return arguments.length？（b=v（a），G）：b}，G.spiral=function（a）{return arguments.length？（a=w[a]| a，G）：a}，G.fontSize=function（a）{return return arguments.length？（e=v（a），G）：e}，G.padding=function（a）{return return arguments.length？（z=v（a），G）（a），G）：z}，G=random=function=function（a）{return return arguments.length（a），G=F=F，G）}{var a=D.D.on.上.申请（D，参数）应用（D，参数）申请（D，参数）申请；返回a==D？G:a，G}；var w={阿基米德：r，矩形：s}，{“d3调度：2}”，2:[函数（b，c，c，c，D，D，D.D，D，D，D，D，D，a.a.var={{阿基米德：a：r：r：r：r：r，r，r，r，r，矩形：s，矩形：s}，，，，，，，，，，，，，，，{“3.3.3调度：2”：2：，，，，，，，，，{“3.3调度”：2：，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，&（c=a.slice（D+1），a=a.slice（0，d）），a&&！b.hasOwnProperty（a））抛出新错误（“未知类型：+a）；返回{type:a，name:c}}}}}函数f（a，b）{for（var e，c=0，d=a.length；谢谢你的答案；55在10到100的范围内是否等于0？因为它不是平均值；对吗？上面的代码是按字数着色的，而我需要按索引着色；如果我想按索引着色，我应该做以下操作。map（函数（d）{return{text:d.word，size:+d.rate，color:d.index}）然后在.append（“text”）.style（“fill”，function（d）{return d.color>=0？“green”：“grey”；}.style（“opacity”，function（d）{return d.color/100}）之后，我尝试了代码，但它并没有使所有单词都高于平均值（如此正索引）绿色；只有一部分道歉需要一段时间才能回复你，我工作忙得不可开交！上面更新了答案，你应该可以运行。它与上面的编辑类似。非常感谢你回复我，尽管你工作忙得不可开交-我非常感谢。我现在正在测试代码。
.style("opacity", function(d) { return d.size / 100 })