d3.js – 将(x)轴添加到散点图以显示组信息

2019年8月4日 268次阅读

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

最佳答案 天真的方法

一种简单但可能不希望的处理方法是使用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的轴组件,你可以单独绘制这些组,即：

//'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

点赞