javascript - D3 将值显示为右轴上的标签

Question

我在 D3 中绘制点图，我想沿右 Y 轴添加值。我以前在很多图表中都这样做过，添加标签很简单，但由于某种原因，这个特定的图表出现了很多问题。

我无法让点的值显示在右轴上。

jsfiddle:图表在点击时显示。

右轴所附数值标签的相关代码:

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (width + 10) + " ,0)")    
    .call(yAxis1)
    .selectAll('text')
    .text(function(d){ return xScale(d.value); });

Answer 1

对于序数轴，您将域值绑定(bind)到轴刻度。因此，比例域应该是:

var yScale1 = d3.scale.ordinal()
    .domain(data.map(function(d) { return d.value; })) //<-- use '.value'
    .rangeRoundPoints([0, height]);

然后你的 y 轴调用就变成了:

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + (width + 10) + " ,0)")  
  .call(yAxis1);

已更新 fiddle .