javascript - D3.js 轴刻度条件格式

Question

我试图让我的轴上的刻度线具有条件格式。例如，如果它们是正数，我希望它们是绿色，如果它们是负数，我希望它们是红色。

var bonus_penalties = [ -1,-13,-5,0,5,10,15];

var bpAxisScale = d3.scale.linear()
    .domain([0,6])
    .range([bottom- 45, 45]);

var bpAxis = d3.svg.axis()
    .scale(bpAxisScale)
    .orient('right')
    .tickFormat(function(d) { return bonus_penalties[d]});

var bp_axis = d3.select("#experienceView").append('svg:g')
    .attr("transform", "translate(160,0)")
    .attr('class', 'bp')
    .call(bpAxis)
    .style('fill',  function(d) {
            if(bonus_penalties[d] < 0){
                return 'red';
            } else {
                return 'green';
            }
    });

Answer 1

Lars Kitthoff 给出了答案:

bp_axis.selectAll("text")
    .style('fill',  function(d) {
        if(bonus_penalties[d].key == 0){
            return 'black';
        } else if(bonus_penalties[d].key < 0){
            return 'red';
        } else {
            return 'green';
        }
    })
    .attr('font-size',"10px")
    .style("text-anchor", "middle");