javascript - d3 if/else 设置颜色

Question

我是最新的 js，无法使用 d3 设置文本颜色:

        var format = d3.format('s');
        var format2 = d3.format("0,000")
        var data=  d3.csv("data/table1.csv", function (data) {
            data.forEach(function (d) {
                d.AMOUNT_PA = +Math.round(d.AMOUNT_PA);
                d.AMOUNT_PA = format2(d.AMOUNT_PA)
            });


            var thead = d3.select("#PA_AMOUNT").select("thead").selectAll("th")
            .data(d3.keys(data[0]))
            .enter().append("th").text(function (d) { return d });

            var tr = d3.select("tbody").selectAll("tr")
            .data(data).enter().append("tr");

            var td = tr.selectAll("td")
                .data(function (d) { return d3.values(d) })
                .enter().append("td")
                .text(function (d) { return d })


                .style("color", data.map(function (x) { 

                if(parseInt(x.AMOUNT_PA)<=30)
                    {return "red"}
                else {}
                 }))

函数在console.log中返回int，但不设置颜色

Answer 1

您的 if 语句中似乎缺少关键字“return”来确定要使用的颜色...

if(parseInt(x.AMOUNT_PA)<=30)
                    { return "red"; }
                else {}
                 }))

看下面的 JSFiddle

http://jsfiddle.net/heavyhorse/4p0sewhe/2/

body.selectAll('h1')
.data(dataset)
.enter()
.append('h1')
.classed('data-label',true)
.text(function(d){ return d.val; })
.style('color',function(d) {
    if(d.val > 30) {
        return "black";
    } else {
        return "red";
    }
});