d3.js - xAxis 刻度的 D3 组标签

Question

我有一个类似的数据集:

[
  {
    date: '2019-01-01',
    value: 100,
    group: 1
  },
  {
    date: '2019-01-02',
    value: 200,
    group: 1
  },
  {
    date: '2019-01-03',
    value: 200,
    group: 2
  },
  {
    date: '2019-01-04',
    value: 200,
    group: 3
  },
  {
    date: '2019-01-05',
    value: 100,
    group: 3
  },
  {
    date: '2019-01-06',
    value: 250,
    group: 3
  }
]

我用 yAxis - value 和 xAxis - date 创建了一个线性图表。

如何通过 group 字段值为 xAxis 实现附加标签，就像我在图片上显示的那样？

Answer 1

这个问题可能对您有帮助:grouped category bar chart with different groups in d3?

但是如果您只需要显示标签而不是按组显示颜色，那么您真正需要做的就是计算每个组中值的数量:

// first, group the data
var groupedData = d3.nest()
        .key(function(d) { return d.group; })
        .rollup(function(v) { return v.length; })
        .entries(data)

// then, get cumulative length of each group
var groupedData = groupedData.map((d, i) => {
        const prev = nestedData[(i - 1)]
        const cumsum = prev ? d.value + prev.cumsum : d.value
        d.cumsum = cumsum
        return d
      })

此代码将数据转换成如下形式:

    [
         {
            "key": 1,
            "values": 2,
            "cumsum": 2
         },
         {
            "key": 2,
            "values": 1,
            "cumsum": 3
         },
         {
            "key": 3,
            "values": 3,
            "cumsum": 6
         }
      ]

现在您需要做的就是将组附加到图表标签下方

const svg = //your svg selector here

const g = svg.append("g")
    .attr("class", "group-labels")
    .attr("x", 0)
    .attr("y", height + 30) //adjust this so that the group labels are below your labels

g.selectAll(".group-label")
    .data(groupedData)
    .enter()
    .append("text")
    .attr("class", "group-label")
    .attr("x", function(d, i) { return xScale.bandwidth() * d.cumsum - xScale.bandwidth() * d.value / 2 })
    .attr("y", 0)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "hanging")