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

Question

我创建了一个像这样的 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);
     });  

这是一个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 值。

不幸的是，在您的对象 行 中，您有 x 和 y，这一定导致了混淆。

希望对您有所帮助。