Marimekko图表:x轴刻度不规则的列宽

时间:2018-01-16 15:13:58

标签: javascript d3.js

我刚刚开始使用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轴刻度标记列(理想情况下是中心),而不是提供宽度的%年龄?

1 个答案:

答案 0 :(得分: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) + ")";
});

当然,您将打印密钥,而不是百分比:

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

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