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轴刻度标记列（理想情况下是中心），而不是提供宽度的％年龄？

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) + ")";
});

当然，您将打印密钥，而不是百分比：

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