向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軸單位轉換為適當的像素。

更新了小提琴 。