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方向上添加当前平移，然后除以比例：）

更新了小提琴：https://jsfiddle.net/thatOneGuy/L2zvz216/2/

添加在D3 Zoomable散点图中缩放的线

1 个答案: