D3.js轴刻度条件格式

D3.js axis tick conditional formatting

本文关键字：条件 格式 js D3      更新时间：2023-09-26

我正在尝试使轴上的记号具有条件格式。例如，如果它们是正数，我希望它们是绿色的；如果它们是负数，则希望它们是红色的。

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';
            }
    });
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");

您可以翻译成现代Javascript语法，但需要注意的是，使用条件链和所有可读格式：

bp_axis.selectAll("text")
    .style('fill',  d =>
        (bonus_penalties[d].key < 0)? 'red'
        : bonus_penalties[d].key?     'green'
        : 'black'
    )
    .attr('font-size',"10px")
    .style("text-anchor", "middle");
相关文章：