Я строю небольшой мультипликатор, откопанный от этого источника здесь. Весь этот пример здесь - мои данные имеют разные категории и число, связанное с ним. Однако мне нужны разные оси для разных диаграмм, и у меня возникают проблемы с настройкой в области оси Y.
CSV выглядит так:
year,category,number
January 2018,Core,6.19
February 2018,Core,5.38
March 2018,Core,4.44
January 2018,MerchandiseExports,9.1
February 2018,MerchandiseExports,4.48
March 2018,MerchandiseExports,-0.66'
Я устанавливаю csv на основе категорий.
// Nest data by subject.
var categories = d3.nest()
.key(function(d) { return d.category; })
.entries(data);
Я вычисляю максимум и минимум среди этих категорий для домена.
categories.forEach(function(s) {
s.max = d3.max(s.values, function(d) { return d.number; });
s.min = d3.min(s.values, function(d) { return d.number; });
});
Я добавляю линейный путь
svg.append("path")
.attr("class", "line")
.attr("d", function(d) { y.domain([d.min - d.min / 5, d.max + d.min / 5]); return line(d.values); });
Я застрял в выяснении логики установки оси y.
yScale = d3.scale.linear()
.range([height, 0]).domain(#What I'm missing)
Поскольку я уже рассчитал min и max каждой категории, это должно идти в домен. Однако я не понял логику отправки домена определенной категории в переменную домена. Как и в случае категории 6.19, максимальная величина и 4.44 - это мин. Как отправить его в домен?
Я искал несколько возможных решений, но это тот, который казался многообещающим, но я этого не понимал.
Когда вам нужно нарисовать ось y, не используйте call()
но each()
и в обратном вызове измените масштаб и вызовите yAxis.
svg.append("g").attr("id", "yAxisG")
.each( function (s) {
var svg1 = d3.select(this);
var d = svg1.datum();
yScale.domain([d.min, d.max]);
svg1.call(yAxis);
});