d3js：替换 X 轴上的特定刻度值

Question

我有一个如下所示的气泡图：

我使用的数据格式如下：

 var data = [{name: "A", rank: 1, student_percentile: 100.0, 
         admit_probability: 24},
        {name: "B", rank: 45, student_percentile: 40.3, 
         admit_probability: 24},
        {name: "C", rank: 89, student_percentile: 89.7, 
         admit_probability: 24},
        {name: "D", rank: 23, student_percentile: 10.9, 
         admit_probability: 24},
        {name: "E", rank: 56, student_percentile: 30.3, 
         admit_probability: 24},
         {name: "F", rank: 34, student_percentile: 110, 
         admit_probability: 84}];

对于输入中的某些值，我没有正确的百分位值，所以我默认输入 110。现在，我想绘制这些值并在 X 轴上而不是 110 上显示 "NAN"。例如，此处 "F" 的 X 轴值为 110。因此，我想将该值标记为 "NAN"。

如何替换 X 轴上的值？

我的脚本如下：

var xscale = d3.scaleLinear()
        .domain(
                d3.extent(data, function(d) { return +d.student_percentile; })
            )
        .nice() 
        .range([0, width]);

    var yscale = d3.scaleLinear()
        .domain(d3.extent(data, function(d) { return +d.rank; }))
        .nice()
        .range([height, 0]);

    var xAxis = d3.axisBottom().scale(xscale);

    var yAxis = d3.axisLeft().scale(yscale);

Answer 1

使用tickFormat更改特定值：

.tickFormat(function(d) {
    return d === 110 ? "NAN" : d
})

这是一个演示：

var svg = d3.select("svg");

var scale = d3.scaleLinear()
  .domain([0, 110])
  .range([20, 480]);

var axis = d3.axisBottom(scale)
  .tickFormat(function(d) {
    return d === 110 ? "NAN" : d
  })

svg.append("g").attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

d3js：替换 X 轴上的特定刻度值

d3js: Replace a particular tick value on X-Axis

javascript

axes

d3.js