将（第二个）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

---

我想要实现的目标。

我想要实现的是一个图，其中点根据它们的 name 分散在 x 轴上，但 x 轴应该每组显示一次 group以及不同组之间的打勾。

结果应如下所示：

---

到目前为止我所拥有的。

我确实有一个 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 轴分布标签和刻度，并且不包含 group 信息。

---

问题。

如何根据数据中的group列分散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