Блог

Главная - Вопросы по программированию - Предотвращение отсечения с помощью домена в d3.js

Предотвращение отсечения с помощью домена в d3.js

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я пытаюсь предотвратить отсечение в большей части верхней части моей диаграммы, увеличивая домен на yAxis вот так:

 mainHeight = 640;
yScale = d3.scale.linear()
    .range([mainHeight, 0])
    .domain(d3.extent([0, d3.max(data, function (d) {
        return (d.total) 1000;
    })]));

Идея состоит в том, чтобы получить максимальное количество данных для yAxis и увеличить его на 1000.

Наибольшее значение имеет 14348 , поэтому при добавлении 1000 к нему создается 15348

Однако верхняя часть диаграммы все еще обрезается, и моя ось не увеличилась, чтобы предотвратить обрезку. Даже если я увеличу число на 9999999999 , этого все равно не произойдет.

Строка генерируется с помощью:

 var totalLine = d3.svg.line()
            .interpolate('monotone')
            .x(function (d) {
                return xScale(d.date);
            })
            .y(function (d) {
                return yScale(d.total);
            });

введите описание изображения здесь

Комментарии:

1. Просто двойная проверка: вы уверены, что не выполняете сброс yScale.domain после этой строки?

2. @GerardoFurtado нет, я не такой.

3. Есть ли у вас самый внешний g элемент, который обертывает все остальные элементы? Если вы это сделаете, то, похоже (как и в моей предыдущей проблеме), вы не устанавливаете ширину и высоту для этого g элемента

Ответ №1:

Попробуйте добавить .nice() в конце.

 yScale = d3.scale.linear()
    .range([mainHeight, 0])
    .domain(d3.extent([0, d3.max(data, function (d) {
        return (d.total) 1000;
    })]))
    .nice();

При этом будет предпринята попытка сделать так, чтобы ось заканчивалась на хороших круглых числах. Вы можете прочитать больше здесь: https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md#linear_nice

Надеюсь, это поможет.