Reputation: 595
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
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