CODEWITHSUNDEEP
javascripthtmld3.js
Kostiantyn Palianychka
Kostiantyn Palianychka

Reputation: 595

d3 if/else to set color

i am newest in js and can not set the text color using 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 {}
                 }))

Function returned int in console.log but not setting color

Upvotes: 0

Views: 6150

Answers (1)

emran
emran

Reputation: 922

It appears your missing the keyword "return" in your if statement that determines the color to use...

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

look at the following 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";
    }
});

Upvotes: 2

Related Questions