我想在我的图表中添加一条水平线,相对于 y 轴值,问题是它们出现在错误的位置。
两条线应显示在相对于 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 轴单位转换为适当的像素。
已更新 fiddle .
关于javascript - 向 d3 图表添加一条水平线显示错误的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27951560/