如何返回d3.js中的路径的y坐标？ [英] How do I return y coordinate of a path in d3.js?

问题描述

我有一个图形，我想要代表图形的线在svg区域顶部悬停时在x坐标处显示一个圆。此圆应该遵循表示曲线的线的路径。问题是我不知道该怎么做。

I have a graph, and I want the line representing the graph to show a circle at the x coordinate when hovering on top of the svg area. This circle should follow the path of the line that represents the curve. The problem is that I don't know how to do this.

下面的代码显示了我已经完成了多长时间，它确实在文档中添加了一个圆圈右x坐标。现在，我用什么替换问号？

The code below shows how far I have succeded, and it indeed adds a circle to the document at the right x coordinate. Now, what do I replace the question mark with?

    svg.on("mousemove", function() {
        d3.select("path.line")
          .style("stroke-width", "2.5px");

         svg.append("svg:circle")
            .attr("cx", Math.floor(event.offsetX-m[1]))
            .attr("cy", ?)
            .attr("r", "10")
            .attr("fill", "red");
    });

推荐答案

SVG提供了一个原生函数 .getPointAtLength（），它返回你通过任何长度的路径的x和y值。

SVG provides a native function called .getPointAtLength() which returns a the x and y values of a path at any length you pass at it.

迭代通过线的长度，直到找到对应的y位置。下面是如何在D3中做的：

You would need to iterate through the length of the line until you find the corresponding y position. Here is how you would do it in D3:

var svg = d3.select("#line").append("svg")
var path = 
    svg.append("path")
      .attr("d", "M0,168L28,95.99999999999997L56,192L84,71.99999999999997L112,120L140,192L168,240L196,168L224,48L252,24L280,192L308,120L336,24L364,168L392,95.99999999999997L420,168L448,95.99999999999997L476,192L504,71.99999999999997L532,120L560,192L588,216L616,168L644,48L672,24L700,192L728,120L756,24L784,192L812,71.99999999999997")
      .attr("fill", "none")
      .attr("stroke", "black");

var circle = 
    svg.append("circle")
      .attr("cx", 100)
      .attr("cy", 350)
      .attr("r", 3)
      .attr("fill", "red");

var pathEl = path.node();
var pathLength = pathEl.getTotalLength();
var BBox = pathEl.getBBox();
var scale = pathLength/BBox.width;
var offsetLeft = document.getElementById("line").offsetLeft;
var randomizeButton = d3.select("button");

svg.on("mousemove", function() {
  var x = d3.event.pageX - offsetLeft; 
  var beginning = x, end = pathLength, target;
  while (true) {
    target = Math.floor((beginning + end) / 2);
    pos = pathEl.getPointAtLength(target);
    if ((target === end || target === beginning) && pos.x !== x) {
        break;
    }
    if (pos.x > x)      end = target;
    else if (pos.x < x) beginning = target;
    else                break; //position found
  }
  circle
    .attr("opacity", 1)
    .attr("cx", x)
    .attr("cy", pos.y);
});

您可以在这里看到一个演示： http://bl.ocks.org/3824661

You can see a demo here: http://bl.ocks.org/3824661

这篇关于如何返回d3.js中的路径的y坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！