4

我使用 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 轴应该每组显示一次组，并在不同组之间显示一个刻度。

结果应如下所示： 在此处输入图像描述

到目前为止我所拥有的。

我确实有 ay 和 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. 完整的代码在这里。自然，这会沿整个 x 轴分布标签和刻度，并且不包含组信息。 使用组中的标签绘制

问题。

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

4

1 回答 1

2

天真的方法

处理此问题的一种简单但可能不是理想的方法是使用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

于 2014-09-19T21:15:54.840 回答