[英]d3js: Replace a particular tick value on X-Axis
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". 对于输入中的某些值,我没有正确的百分位值,因此默认情况下输入110。现在,我想绘制这些值,并在X轴而不是110上显示“ NAN”。 For example, Here "F" has X-axis value as 110. So, I want to mark that value as "NAN".
例如,这里的“ F”的X轴值为110。因此,我想将该值标记为“ NAN”。
How can I replace a value on X-axis? 如何替换X轴上的值?
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
更改该特定值:
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.