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

我创建了一个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));

我也会放置标签，告诉线的x轴和y轴在哪里。线的端点可以拖动，但我无法在拖动事件中获得缩放坐标：

var drag = d3.behavior
     .drag()
     .on("drag", function(d) {
        var circle = d3.select(this),
            line = d3.select('.line'),
            isStart = circle.classed('start'),
            textClass = isStart ? ".textstart" : ".textfinish",
            lineX = isStart ? 'x1' : 'x2',
            lineY = isStart ? 'y1' : 'y2',
            text = d3.select(textClass);

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

        line.attr(lineX, d3.event.x).attr(lineY, d3.event.y);
        text.attr('x', d3.event.x).attr('y', d3.event.y - 20);
        circle.attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
     });  

---

这是一个显示问题的示例。

我可以建议您更改行吗：

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

致：

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

发生这种情况的原因是，您要传递给函数的对象是d3.behavior，它作为x和y，是您拖动到的鼠标位置。因此，您需要使用

invert

，以便将x、y鼠标坐标分别转换为xScale和yScale对应的x、y值

不幸的是，在object

行中，有x和y，这一定导致了混淆

我希望这能有所帮助。
谢谢你，你能解释一下为什么这样做吗？我已经更新了我的答案。我希望现在更清楚了。：）
text.text( function (d) { return "( " + d3.format(",.2f")(xScale.invert(d.x))  + ", " + d3.format(",.2f")(yScale.invert(d.y)) +" )"; });