D3.js xAxis蜱的D3组标签

我有一个类似的数据集：

[
  {
    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-

值和xAxis-
日期创建了一个线性图表

如何通过
group
字段值为xAxis实现附加标签，如图所示

这个问题可能会帮助您：

但是，如果只需要按组显示标签而不按组显示颜色，则实际上只需计算每个组中的值数：

// 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")

如果您使用
scaleTime
来创建它，您需要在日期中添加时间，如
scaleLinear
和
scaleBand
，
scaleTime
需要精确的值来确定正确的坐标，但有些人忘记了日期也需要时间



JS-Bin
风险值数据=[
{
日期：“2019-01-01”，
数值：100，
组别:1
},
{
日期：“2019-01-02”，
价值：200，
组别:1
},
{
日期：“2019-01-03”，
价值：200，
组别:2
},
{
日期：“2019-01-04”，
价值：200，
组别:3
},
{
日期：“2019-01-05”，
数值：100，
组别:3
},
{
日期：“2019-01-06”，
价值：250，
组别:3
}
]
//首先，将数据分组
var groupedData=d3.nest（）
.key（函数（d）{返回d.group；}）
.rollup（函数（v）{返回{
计数：v.length，
lastDate:v[v.length-1]。日期+'12:00:00'
}; })
.条目（数据）
//console.log（groupedData）
//然后，得到每组的累积长度
var groupedData=groupedData.map（（d，i）=>{
const prev=groupedData[（i-1）]
const cumsum=prev？d.value.count+prev.cumsum:d.value.count
d、 cumsum=cumsum
返回d
})
const svg=d3.select（'svg'）
可变宽度=500
var xscaleTime=d3.scaleTime（）
.域（[新日期（'2019-01-01'）、新日期（'2019-01-06'））
.range（[0500]）.nice（）
var带宽=（xscaleTime（新日期（groupedData[1].value.lastDate））
-xscaleTime（新日期（groupedData[0].value.lastDate）））
var填充=20
常量b=svg.append（“g”）
const t=b.append（“g”）.call（d3.axisBottom（）.scale（xscaleTime））
常数g=b.append（“g”）
.attr（“类别”、“组标签”）
.attr（“y”，30）//调整此值，使组标签位于标签下方
g、 全选（“.group标签”）
.数据（分组数据）
.输入（）
.append（“文本”）
.attr（“类”、“组标签”）
.attr（“x”，函数（d，i）{
返回xscaleTime（新日期（d.value.lastDate））-bandwidth*（（d.value.count-1）/2）
})
.attr（“y”，50）
.attr（“文本锚定”、“中间”）
.text（函数（d，i）{
返回“是组”+d键
})
你好，凯茜！非常感谢，你的回答很有帮助。在我的例子中，xAxis上有scaleTime（）。你能澄清一下我应该用什么来代替
xScale.bandwidth（）
？