javascript - D3.JS - 小倍数的不同域的不同轴

Question

我正在构建一个从这个源 fork 出来的小倍数 here 。非常像这里的例子 - 我的数据有不同的类别和与之相关的数字。但是，我希望不同的图表有不同的轴，并且在 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 是最小值一样。我如何将其发送到域？

我查找了几种可能的解决方案，但是 this是一个看起来很有希望的 - 但我不明白这一点。

Answer 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);
   });