Кто-нибудь знает, как добавить ось Y к этому примеру ниже? https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08
В примере показано, как создать несколько диаграмм одновременно с динамически вычисляемым масштабом yScale для каждого ряда данных. Но как добавить yAxis к каждой диаграмме, используя локальную yScale?
Учитывая пример, который вы связали, единственное, что вам нужно, это установить локальную переменную для каждого 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" решили мою проблему :) Еще раз спасибо!