Question

我用D3创建了一个行图，并像这样创建了我的y轴：

  var yScale = d3.scale.ordinal()
    .domain(data.map(function (d) { return d.name }))
    .rangeRoundBands([0, data.length * barHeight], 0.05);

  var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('left');

我的源数据是以下对象的数组：

id: 1,
name: "Test" // y-axis value
score: 10 // x-axis value

这个工作正常，直到我有两个同名的对象。因此，我改变了我的y-scale以使用id字段，因为它始终是唯一的。

当然这样做意味着我现在将id作为我的y轴刻度值而不是名称。那么如何在源数据中使用不同的值作为刻度值？

Answer 1

使用.tickFormat()：

var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient('left')
  .tickFormat(function(d, i) { return data[i].name; });

不幸的是，由于只有标签被传递到函数中，因此不是非常简单，因此您必须获取索引并使用它来索引数据。

完整演示here。

对轴刻度值使用不同的字段

1 个答案: