向d3图表添加水平线显示错误的值

Question

我试图在我的图表中添加一条水平线,相对于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

Answer 1

在你的代码中你有这个:

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

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

所以当你这样做时:

.attr("y1", before_meal)

你告诉d3把一条线放在90"像素".而是使用:

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

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

更新了小提琴.