将（第二个）x轴添加到散点图以显示组信息

Question

我使用d3.js创建一个散点图，其中的点按名称和附带的数字排列。 绘制的数据如下所示：

name,   group, number
"AB",   "A",   0.5
"ABC",  "A",   10.0
"BC",   "B",   3.0
"BCD",  "B",   5.0
"BCDE", "B",   0.3
"CD",   "C",   1.6
"DE",   "D",   1.5

---

我想要实现的目标。

我想要实现的是一个绘图，其中点根据名称分散在x轴上，但x轴应该每组显示组一次以及不同群体之间的勾号。

结果应如下所示：

---

到目前为止我有什么。

我有一个y轴和一个x轴，没有显示刻度和标签。原则上，使用下面的代码创建轴（x轴的示例）：

var x = d3.scale.ordinal()
    .rangeBands([0, 400]);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(0) // hide ticks
    .tickFormat(""); // hide labels

该域派生自 name 列：

x.domain(data.map(function(d) { return d.name; })); 

并附加到实际的svg：

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + 400 + ")")
    .call(xAxis)

此代码产生以下图表：

---

我尝试了什么。

我尝试通过简单地重复用于创建上述第一个x轴的步骤来添加第二个x轴。我刚刚将x重命名为x2，使得刻度和标签可见，并且不是从d.name而是从d.group派生出域。完整的代码是here。当然，这会沿整个x轴分布标签和刻度，而不包含组信息。

---

问题。

如何根据数据中的组列分散x轴的标签和刻度？

Answer 1

天真的方法

一种简单但可能不希望的处理方法是使用tickFormat简单地重复比例尺上每个序数值的组值：

var lkUp = {};
chartData.forEach(function(d) { lkUp[d.name] = {group: d.group}; });
xAxis.tickFormat(function(d) { return lkUp[d].group; });

工作示例：http://bl.ocks.org/jsl6906/64de7c45e4484114334b

从头开始绘图

如果您不想尝试使用D3的axis组件，可以单独绘制这些组，即：

//'chartGroups' is an array of calculated groups, with start and end coordinates
var chartGroups = svg.selectAll("g.chartGroup").data(chartGroups)
  .enter().append("g").attr(..);
chartGroups.append("text").attr(..);
chartGroups.append("path").attr(..);

工作示例：http://bl.ocks.org/jsl6906/a8a4dd54f3d8de6a7aae