d3js: заменить определенное значение тика на оси X

Question

d3js: заменить определенное значение тика на оси X

1

У меня есть диаграмма пузырьков, которая выглядит следующим образом:

Данные, которые я использую, имеют следующий формат:

 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);

Yesha 01 нояб. 2017, в 12:09

Источник

Теги:

javascript

d3.js

axes

1 ответ

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2017-11-01T07-41-00.000Z

Используйте 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>

Я сталкиваюсь с одной проблемой. Поскольку масштаб оси X выбирается динамически на основе входных данных, а разница в значениях становится меньше (90, 95, 100, 105, 110), я получаю 2 отдельных значения для «NAN». Я изменил строку на: tickFormat (function (d) {return d> 100? "NAN": d} Я просто хочу, чтобы все, что выше 100, было "NAN", но только одна такая отметка.
@ Йеша, так как это другая проблема, я предлагаю вам опубликовать новый вопрос с точным объяснением ваших значений и, желательно, с минимальным воспроизводимым примером, показывающим ось. Имейте в виду, что у вас есть другой вопрос: галочки автоматически создаются осью, но вы хотите показать только 1 галочку (независимо от того, является ли она числом или строкой).