在d3v4

Question

我是d3v4的新用户并且在图表上工作，我需要在yaxis上与其标题匹配的特定日期显示小矩形。我面临的问题是图表区域中的矩形不是等于yaxis点标签，我尝试通过硬编码更改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

但是，如果您仍然希望（无论出于何种原因）硬编码矩形的height或width，请使用点比例，然后移动{{ 1}}位置高度的一半。