D3.js - разные оси для разных доменов для небольших мультипликаторов

Я создаю небольшие мультипликаторы на основе этого источника здесь. Очень похоже на этот пример здесь - мои данные имеют разные категории и связанные с ними числа. Однако мне нужны разные оси для разных диаграмм, и у меня проблемы с настройкой в ​​области оси 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)

Поскольку я уже рассчитал минимальное и максимальное значение для каждой категории, это должно быть включено в домен. Однако я не понял логики отправки домена конкретной категории в переменную домена. Как и в случае категории 6.19 - это максимум, а 4.44 - это минимум. Как мне отправить это в домен?

Я просмотрел несколько возможных решений, но это показался многообещающим, но я этого не понял.

1
0
216
1

Ответы 1

Когда вам нужно нарисовать ось 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);
   });

Спасибо! Это работает! Но я не уверен, как данные в json попадают в переменную d через datum. Настройка домена и последующий вызов индивидуально для каждого svg имеет смысл.

user10046100 26.10.2018 07:34

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