将水平线添加到 d3 图形以错误的值显示

Adding a horizontal line to d3 graph displays at the wrong value

本文关键字：错误 显示 图形 水平线 添加 d3      更新时间：2023-09-26

我正在尝试在我的图形中添加一条水平线，相对于 y 轴值，问题是它们出现在错误的位置。

这 2 条线应相对于 y 轴值显示在值 90 和 140 处。

我用来添加该行的代码如下：

if (before_meal !== null || after_meal !== null) {
                    svg.append("svg:line")
                        .attr("x1", 0)
                        .attr("x2", width)
                        .attr("y1", before_meal)
                        .attr("y2", before_meal)
                        .style("stroke", "rgb(189, 189, 189)");
                    svg.append("svg:line")
                        .attr("x1", 0)
                        .attr("x2", width)
                        .attr("y1", after_meal)
                        .attr("y2", after_meal)
                        .style("stroke", "rgb(189, 189, 189)");
}

请在此处查看我的工作示例：JSFiddle

在你的代码中，你有这个：

var y = d3.scale.linear()
       .range([height, 0]);

这将返回一个函数y该函数将像素空间映射到绘图坐标空间。

因此，当您这样做时：

.attr("y1", before_meal)

您告诉 d3 在 90 "像素"处放一条线。 而是使用：

.attr("y1", y(before_meal))

它告诉 d3 将 90 y 轴单位转换为适当的像素。

更新的小提琴。

相关文章：