Javascript D3从数据值中勾选标签

我试图从我的数据对象的键值在y轴上创建记号标签。数据对象如下所示：

数据对象：

var data = [
      {name: 'E2E Tests', passed: 4, notRun: 4, failed: 0, blocked: 0, notApplicable: 0 },
      {name: '868: Services', passed: 3, notRun: 3, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '869: Services', passed: 2, notRun: 1, failed: 2, blocked: 1, notApplicable: 0 },
      {name: 'Bugs fixed', passed: 1, notRun: 1, failed: 0, blocked: 2, notApplicable: 0 },
      {name: '870: Services', passed: 2, notRun: 0, failed: 1, blocked: 0, notApplicable: 1 },
      {name: '867: Local', passed: 3, notRun: 0, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '866: Local', passed: 3, notRun: 1, failed: 0, blocked: 0, notApplicable: 0 }
];

完整代码：

var data = [
      {name: 'E2E Tests', passed: 4, notRun: 4, failed: 0, blocked: 0, notApplicable: 0 },
      {name: '868: Services', passed: 3, notRun: 3, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '869: Services', passed: 2, notRun: 1, failed: 2, blocked: 1, notApplicable: 0 },
      {name: 'Bugs fixed', passed: 1, notRun: 1, failed: 0, blocked: 2, notApplicable: 0 },
      {name: '870: Services', passed: 2, notRun: 0, failed: 1, blocked: 0, notApplicable: 1 },
      {name: '867: Local', passed: 3, notRun: 0, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '866: Local', passed: 3, notRun: 1, failed: 0, blocked: 0, notApplicable: 0 }
];

我想使用名称值作为每个记号的标签。到目前为止，我已经尝试了两种方法来实现这一点

尝试1:

var data = [
      {name: 'E2E Tests', passed: 4, notRun: 4, failed: 0, blocked: 0, notApplicable: 0 },
      {name: '868: Services', passed: 3, notRun: 3, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '869: Services', passed: 2, notRun: 1, failed: 2, blocked: 1, notApplicable: 0 },
      {name: 'Bugs fixed', passed: 1, notRun: 1, failed: 0, blocked: 2, notApplicable: 0 },
      {name: '870: Services', passed: 2, notRun: 0, failed: 1, blocked: 0, notApplicable: 1 },
      {name: '867: Local', passed: 3, notRun: 0, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '866: Local', passed: 3, notRun: 1, failed: 0, blocked: 0, notApplicable: 0 }
];

我尝试创建一个名称值的独立数组，并将其传递到我添加到y轴的tickValues方法中，但没有成功：

var yLabels = data.map(d => d.name); 

var yAxis = d3.axisLeft(yScale).tickValues(yLabels);

尝试2:

var data = [
      {name: 'E2E Tests', passed: 4, notRun: 4, failed: 0, blocked: 0, notApplicable: 0 },
      {name: '868: Services', passed: 3, notRun: 3, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '869: Services', passed: 2, notRun: 1, failed: 2, blocked: 1, notApplicable: 0 },
      {name: 'Bugs fixed', passed: 1, notRun: 1, failed: 0, blocked: 2, notApplicable: 0 },
      {name: '870: Services', passed: 2, notRun: 0, failed: 1, blocked: 0, notApplicable: 1 },
      {name: '867: Local', passed: 3, notRun: 0, failed: 1, blocked: 0, notApplicable: 0 },
      {name: '866: Local', passed: 3, notRun: 1, failed: 0, blocked: 0, notApplicable: 0 }
];

然后，我尝试将以下更改添加到y轴：

var yAxis = d3.axisLeft(yScale)
    .tickValues(data)
    .tickFormat(d => d.name);

这看起来像是将文本添加到svg中，但它们都位于彼此重叠的顶部。我觉得必须有一个简单和干净的方法来做到这一点

---

问题出在您的标尺上（您不会使用线性标尺）：

由于域是打印在轴标签跨距上的内容，因此给定范围中的特定值。轴渲染功能使用比例的域

希望此参考资料有助于：

---

如果您有任何问题，请随时提问。

尝试将刻度更改为

ordinalScale（）

。示例使用X轴刻度，但您应该能够调整Y轴的代码。以下操作有效：var yScale=d3.scaleBand（）.domain（data.map（d=>d.name））.rangeRound（[height，0]）我猜也不需要rangeRound。非常感谢。