I have a bubble chart which looks like the following:
The data that I am using has the following format:
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}];
For some values in input, I don't have correct percentile value, so I am putting by default 110. Now, I want to plot these values and on X-axis instead of 110, I want to show "NAN". For example, Here "F" has X-axis value as 110. So, I want to mark that value as "NAN".
How can I replace a value on X-axis?
My script is as follows:
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);
Use tickFormat
to change that specific value:
.tickFormat(function(d) {
return d === 110 ? "NAN" : d
})
Here is a demo:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.