小倍数：如何添加轴？

Question

有人知道如何向下面的示例添加 y 轴吗？ https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08

该示例展示了如何为每个数据系列使用动态计算的 yScale 一次生成多个图表。但是如何使用本地 yScale 将 yAxis 添加到每个图表？

Answer 1

鉴于您链接的示例，您唯一需要做的就是为每个 SVG 设置局部变量：

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

在这里，我使用 ticks(3) 因为我们没有太多的垂直 space，ty 是为每个 SVG 创建的比例。然后，您稍后将该局部变量用作：

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

这是更新后的 bl.ocks：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()));
};

小倍数：如何添加轴？

Small multiples: how to add axis?

javascript

svg

axis

d3.js