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