d3 - 获取标签的x和y的比例

Question

我创建了一个像这样的x和y比例：

stalkers

然后我用它来创建一个x和y轴以及如何相对于这些轴定位一条线：

var xScale = d3.scale.linear()
    .domain([0, 20])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([0, 20])
    .range([height, 0]);

我还定位标签，告诉线的x轴和y轴在哪里。该行的终点是可拖动的，但我无法在拖动事件中获得缩放坐标：

var line = {
    start: {x: 2, y: 3, type: 'start'},
    finish: {x: 14, y: 6, type: 'finish'} 
  };

var g = svg.append('g');

  g.append('line')
      .style('stroke', 'blue')
      .attr('class', 'line')
      .attr('x1', xScale(line.start.x))
      .attr('y1', yScale(line.start.y))
      .attr('x2', xScale(line.finish.x))
      .attr('y2', yScale(line.finish.y));

这是显示问题的jsbin。

Answer 1

我建议你换行：

text.text( function (d) { return "( " + d.x  + ", " + d.y +" )"; });

为：

text.text( function (d) { return "( " + d3.format(",.2f")(xScale.invert(d.x))  + ", " + d3.format(",.2f")(yScale.invert(d.y)) +" )"; });

这样您将显示所需的值，如下图所示：

发生这种情况的原因是因为您传递给函数的对象d是d3.behaviour，其中包含拖动到的位置的鼠标位置x和y。因此，您需要使用invert以便将x，y鼠标坐标分别转换为xScale和yScale的相应x，y值。

不幸的是，在你的对象line中，你有x和y，这一定是造成了混乱。

我希望这会有所帮助。