javascript - Marimekko 图表 : x axis ticks with irregular column width

Question

我刚开始使用 D3，很快就明白这是一个非常低级的工具。我正在使用 D3 生成 Marimekko 图表，使用 Mike Bostock 在 b.locks ，老实说，这对我来说太先进了，但我开始使用 D3 是因为我需要 Marimekko 图表，所以我来了。

这里的 x 轴有刻度，0 到 100%，间隔为 10%。如果我对这些代码摘录的理解是正确的...

将 x 轴设置为线性刻度

var x = d3.scale.linear().range([0, width - 3 * margin]);

给 x 轴 10 个刻度

var xtick = svg.selectAll(".x").data(x.ticks(10))

在我的使用案例中，我希望 x 轴以 Marimekko 图表固有的不规则间隔刻度，轴标签是类别，而不是百分比。

所需的行为，就 x 轴标记而言，可以用这个 b.locks example by 'cool Blue' 来说明

据我所知，我需要一个序数轴而不是线性轴(如这段酷蓝代码的摘录)

var padding = 0.1, outerPadding = 0.3,
x = d3.scale.ordinal().rangeRoundBands([0, width], padding, outerPadding);

我如何修改 Mike Bostock 的代码来给我一个示例，其中 x 轴刻度标记列(理想情况下居中)，而不是提供宽度的 %age？

Answer 1

我不会说 D3 是那么低级别，因为它有很多抽象。然而，D3 不是图表工具(并且，从这个意义上说，它是低级的...)，这让初学者很难上手。

不过，您很幸运:此处所需的更改很少。首先，您会将正确的数据传递给生成轴的选择...

var xtick = svg.selectAll(".x")
    .data(segments)
    //etc..

...然后使用相同的数学方法进行翻译，但将总和的一半加起来:

.attr("transform", function(d, i) {
    return "translate(" + x((d.offset + d.sum / 2) / sum) + "," + y(1) + ")";
});

当然，您将打印 key ，而不是百分比:

xtick.text(function(d) {
    return d.key
});

这是更新的 bl.ocks:https://bl.ocks.org/anonymous/09a8881e5bab2b12e7fd46c90a63b3fd/fd7b1a7b20f8436666f1544b6774778e748934ba