在d3中单击时沿路径或线获取位置

Question

正如标题中所述，我想知道如何沿着鼠标点击的路径或线捕获位置 - 是仅使用mousedown事件然后计算d3.event.pageX, d3.event.pageY匹配这条线？还有更好的方法吗？

Answer 1

使用d3.mouse功能。

  

d3.mouse（容器）

     

返回当前d3.event的x和y坐标，相对于   指定的容器。容器可以是HTML或SVG容器   元素，例如svg：g或svg：svg。坐标返回为   一个双元素数组[x，y]。

参考：https://github.com/mbostock/d3/wiki/Selections#d3_mouse

示例：（尝试点击路径）

var points = [
  [480, 200],
  [580, 400],
  [680, 100],
  [780, 300],
  [180, 300],
  [280, 100],
  [380, 400]
];

var svg = d3.select("body").append("svg")
  .attr("width", 960)
  .attr("height", 500);

var path = svg.append("path")
  .data([points])
  .attr("d", d3.svg.line()
    .tension(0) // Catmull–Rom
    .interpolate("cardinal-closed"));

var circle = svg.append("circle")
  .attr("r", 5)
  .style("fill", "red")
  .attr("cx", points[0][0])
  .attr("cy", points[0][1]);

path.on("click", function() {
  circle.attr("cx", d3.mouse(this)[0])
    .attr("cy", d3.mouse(this)[1]);
});

path {
  fill: none;
  stroke: black;
  stroke-width: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>