Малые кратные: как добавить ось?

Кто-нибудь знает, как добавить ось Y к этому примеру ниже? https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08

В примере показано, как создать несколько диаграмм одновременно с динамически вычисляемым масштабом yScale для каждого ряда данных. Но как добавить yAxis к каждой диаграмме, используя локальную yScale?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Учитывая пример, который вы связали, единственное, что вам нужно, это установить локальную переменную для каждого SVG:

axis.set(this, d3.axisRight(ty).ticks(3));

Здесь я использую ticks(3), потому что у нас не так много места по вертикали, а ty — это масштаб, созданный для каждого SVG. Затем вы позже используете эту локальную переменную как:

svg.each(function(){
    axis.get(this)(d3.select(this)
        .append("g")
        .attr("transform", "translate(" + width + ",0)"));
});

Вот обновленные блоки: https://bl.ocks.org/GerardoFurtado/7ce71db8470c75940feed0d64b3f1f25/fb38b0867f434268e254f08e469cf38113179472


PS: Обратите внимание, что здесь я использую...

axisGenerator(groupSelection)

... вместо более традиционного шаблона...

groupSelection.call(axisGenerator)

... потому что мы не можем получить this с помощью традиционного шаблона. Для использования традиционного шаблона без метода each вам понадобится странная вспомогательная функция, например:

svg.append("g")
    .attr("transform", "translate(" + width + ",0)")
    .call(generateAxis);

function generateAxis(selection) {
    selection.call(axis.get(selection.node()));
};

Большое спасибо! На самом деле я сделал две ошибки. Во-первых, я попробовал метод «вызова» с анонимной функцией для вызова оси, а во-вторых, у меня более сложная структура данных и я указываю на «это» с более глубокого уровня axis.set(this, d3.axisRight(ty).ticks(3 )); была неверная ссылка - изменение "this" на "this.parentNode" и использование метода "svg.each" решили мою проблему :) Еще раз спасибо!

Ray 07.04.2019 11:03

Другие вопросы по теме