将（第二）x轴添加到散点图以显示组信息 [英] Add (second) x axis to scatterplot to display group information

问题描述

我使用d3.js做一个散点图，其中的点按他们的名字和一个随附的数字排列。
绘制的数据将如下所示：

 名称，组，数字
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轴应该每组显示组一次以及不同组之间的刻度。 / p>

结果应如下所示：

---

$ b

我有ay和x轴，不显示刻度和标签。原则上，使用以下代码创建轴（x轴的示例）：

  var x = d3.scale。 ordinal（）
 .rangeBands（[0，400]）; 
 var xAxis = d3.svg.axis（）
 .scale（x）
 .orient（bottom）
 .tickValues（0）//隐藏ticks 
 .tickFormat（）; //隐藏标签
  

域来自名称 / p>

  x.domain（data.map（function（d）{return d.name;}））; 
  

并附加到实际的svg：

  svg.append（g）
 .attr（class，x axis）
 .attr（transform，translate + 400 +））
 .call（xAxis）
  

下面的图：

---

我尝试了。

我试图添加第二个x轴重复用于创建上述第一x轴的步骤。我刚刚将 x 重命名为 x2 ，使得标记和标签可见，并且导出的域不是 d.name ，但从 d.group 。完整代码为

从头开始绘制

如果你不使用D3的 axis 组件，你可以分别绘制这些组，例如：

  //'chartGroups'是一个计算组的数组，具有开始和结束坐标
 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

I make a scatterplot using d3.js where the points are arranged by their name and an accompanying number. The data that is plotted would look like this:

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

---

What I want to achieve.

What I want to achieve is a plot where the points are scattered on the x axis according to their name, but the x axis should display the group once per group and a tick between different groups.

The result should look like this:

---

What I have so far.

I do have a y and an x axis, the ticks and labels are not shown. In principle, the axes are created using the code below (example for the x axis):

var x = d3.scale.ordinal()
    .rangeBands([0, 400]);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(0) // hide ticks
    .tickFormat(""); // hide labels

The domain is derived from the name column:

x.domain(data.map(function(d) { return d.name; })); 

And appended to to actual svg:

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + 400 + ")")
    .call(xAxis)

This code results in the following plot:

---

What I tried.

I tried with adding a second x axis by simply repeating the steps that were used to create the first x axis described above. I just renamed x to x2, made ticks and labels visible, and derived the domain not from d.name but from d.group. The complete code is here. Naturally, this distributes the labels and ticks along the whole x axis and does not incorporate the group information.

---

Question.

How can I scatter the labels and ticks of the x axis according to the group column from the data?

解决方案

Naive approach

One simplistic, but perhaps not desired way of handling this would be by using tickFormat to simply repeat the group value for each ordinal value on the scale:

var lkUp = {};
chartData.forEach(function(d) { lkUp[d.name] = {group: d.group}; });
xAxis.tickFormat(function(d) { return lkUp[d].group; });

Working example: http://bl.ocks.org/jsl6906/64de7c45e4484114334b

Drawing from scratch

If you move outside of trying to use D3's axis component, you can draw these groups separately, i.e.:

//'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(..);

Working example: http://bl.ocks.org/jsl6906/a8a4dd54f3d8de6a7aae

这篇关于将（第二）x轴添加到散点图以显示组信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！