javascript - 散点图的线条正确，但线条上的点已沿 y 轴翻转

Question

我正在尝试使用 this example 生成散点图的约束松弛。这是我的semi-working Plunker 。

我遇到的麻烦是我想沿着蓝线绘制点。相反，它们沿 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

这使蓝线图正确，但点不正确。我希望点(当然还有标签)沿着蓝线绘制，如 my Plunker 中所示。 。我该如何解决这个问题？

Answer 1

我的方法是使用这两个比例来简化所有 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函数代码，但其中一些代码可以使用类似的技术进行简化。