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を入れています。これらの値をプロットしたいのですが、110ではなく、X軸に "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>