d3.js - 将(第二个)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

域派生自名称列:

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