javascript - d3v4 中矩形绘制不等于 y 轴标签的问题

Question

我是 d3v4 的新手，正在制作一个图表，我需要在与 yaxis 上的标题匹配的特定日期上显示小矩形。我面临的问题是图表区域中的矩形绘制的不等于 y 轴点标签，我尝试通过硬编码更改 y 值，它工作正常，但重点是数据对象的数量会像它一样实时变化可以是数组中任意数量的对象。这是plunker

为了使用有限的数据对象动态绘制图表，我在图表顶部创建了几个按钮，以便图表中的矩形可以绘制与 y 轴标签相同的矩形。

非常感谢任何帮助。

Answer 1

您正在使用波段比例:在这种情况下，您不应该更改y位置，它应该只是......

.attr('y', function(d) {
    return yScale(d.title);
})

..并且您不应该对height进行硬编码:改用bandwidth():

.attr('height', yScale.bandwidth())

现在的问题是设置比例的 paddingInner 和 paddingOuter，直到获得所需的结果。例如:

var yScale = d3.scaleBand().domain(data.map(function(d) {
        return d.title
    }))
    .range([height - 20, 0])
    .paddingInner(0.75)
    .paddingOuter(.2);

这是经过这些更改的 plunker:https://plnkr.co/edit/ZxGCeDGYwDGzUCYiSztQ?p=preview

但是，如果您仍然想要(无论出于何种原因)对矩形的高度或宽度进行硬编码，请改用点比例 ，然后将 y 位置移动一半高度。