Javascript 散点图正确地绘制直线，但直线上的点已沿y轴翻转

我试图用约束松弛法生成一个散点图。 这是我的

我遇到的麻烦是我想沿着蓝线画点。相反，它们沿y轴反转

示例中的原始代码实际上翻转了轴：

var y = d3.scale.linear()
    .domain([6.6, d3.max(data, function (d) {
    return d[1] + 0 ;
})])
    .range([0, height]); //flip y

我是这样解开的：

.range([height, 0]); //flip y

---

这使得蓝线图正确，但点不正确。我想要点和标签，当然要沿着图中显示的蓝线绘制。如何解决此问题？

我的方法是使用以下两个比例简化所有x/y计算：

var xext = d3.extent(data, d => d[0]);
var sx = d3.scale.linear()
  .domain(xext)
  .range([0, width])
  .nice();

var yext = d3.extent(data, d => d[1]);
var sy = d3.scale.linear()
  .domain(yext)
  .range([height, 0]) // flip y-axis
  .nice();

然后可以从原始数据创建新的dataPoints数组，如下所示：

var lastYear = 2016;
var dataPoints = data.map(function(d, i) {
  dx = sx(d[0]);
  dy = sy(d[1]);
  return {
    x: dx,
    y: dy,
    label: lastYear - i,
    labelX: dx + 5,
    labelY: dy - 5
  };
});
console.log(dataPoints);

从这个增强的数据结构中，所有的线、点和标签都放置在图表区域中

// begin of drawing lines
var line = d3.svg.line()
  .x(d => d.x)
  .y(d => d.y)
  .interpolate("linear");

g.append("path")
  .attr("d", line(dataPoints))
  .attr("transform", "translate(0,0)")
  .style("stroke-width", 2)
  .style("stroke", "steelblue")
  .style("opacity", 0.7)
  .style("fill", "none");


// Place the points
var viewPoints = points.selectAll("point").data(dataPoints);

viewPoints.enter()
  .append("circle")
  .attr({
    class: "point",
    cx: d => d.x,
    cy: d => d.y,
    r: 2
  });


// Place the labels
var viewLabels = labels.selectAll("label").data(dataPoints);

viewLabels.enter()
  .append("text")
  .text(d => d.label)
  .attr({
    class: "label",
    x: d => d.labelX,
    y: d => d.labelY
  });


// Place the lines. Lines use the point position
// for the x1,y1 and the label position for the x2,y2.
var viewLines = lines.selectAll("line").data(dataPoints);

viewLines.enter()
  .append("line")
  .attr({
    class: "line",
    x1: d => d.x,
    y1: d => d.y,
    x2: d => d.labelX,
    y2: d => d.labelY
  });

---

我没有更改任何relax函数代码，但是可以使用类似的技术简化其中一些代码。

这与我想做的相反。我想要点和标签，当然是沿着蓝色线的图形，因为它出现在我的扑克牌。哦，对不起-我读错了。。。我将编辑我的答案。我还更新了plunkr at，如果我想通过将y轴的域扩展到最大y值的最近舍入值之外，来消除点标签与x轴之间的冲突，我该如何做？我不熟悉。很好，所以我最近听到的是：对不起，我不清楚如何操作这个评论。