javascript - 添加在 D3 可缩放散点图中缩放的线

Question

我实现了这个解决方案:http://bl.ocks.org/peterssonjonas/4a0e7cb8d23231243e0e

一切都运行良好。

我尝试向此图表添加一条简单的线并使其正确缩放，我需要一条垂直线和一条从左下角到右上角 45 度的线。

我只是找不到一种使缩放正常工作的方法，我只需要在此处添加简单的线条。

Answer 1

如果我理解正确的话。您只需在添加点的位置添加一行:

var lineTry = objects.append('line').attr('id','lineTry')
      .attr('x1', x(0))
      .attr('y1', y(-1000))
      .attr('x2', x(0))
      .attr('y2', y(1000)) 

上面的 y 值可以更改为图形的高度，但目前有效。然后进行平移或缩放:

  var thisTrans = d3.event.translate;
  var thisScale = d3.event.scale

  svg.selectAll("#lineTry")
    .attr('x1', x(0))
    .attr('y1', y((-1000 + thisTrans[1]) / thisScale))
    .attr('x2', x(0))
    .attr('y2', y((1000 + thisTrans[1]) / thisScale))

我使用先前的值 1000 等添加 y 方向上的当前平移，然后将其除以比例:)

更新了 fiddle :https://jsfiddle.net/thatOneGuy/L2zvz216/2/