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

Posted 2023-02-22

【中文标题】将（第二个）x 轴添加到散点图中以显示组信息

【英文标题】：Add (second) x axis to scatterplot to display group information

【发布时间】：2014-11-12 20:16:41

【问题描述】：

我使用 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轴的标签和刻度？

【参考方案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

【讨论】：

谢谢乔希！这就像一个魅力！不过有一件事，我正在尝试轮换新的组标签。我怎样才能做到这一点？我考虑过使用.atrr("transform", "rotate(-90)"，但是当我在此行之前添加它时，它并没有按预期工作：.text(function(d) return d.group; );。相反，整个标签块都沿 y 轴旋转。任何想法？还是我应该为此提出一个新问题？

要使文本按预期旋转，您可能需要更改该文本的text-anchor 样式，即：.style("text-anchor", "start") 或"end"，缩放的默认值是"middle"