我刚开始使用 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?
最佳答案
我不会说 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
关于javascript - Marimekko 图表 : x axis ticks with irregular column width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48284390/