D3:单击散点图中的圆时添加一条线

D3: adding a line when clicking on a circle in scatter plot

本文关键字：添加 一条 单击 散点图 D3      更新时间：2023-09-26

我有一个散点图。现在，如果我单击其中一个点，如何生成一条通过该点的线？

我被困在两个地方：

  1. 使用以下代码，为什么现在显示我的行？ <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="d3.min.js"></script> <script> var width = 500, height = 500; var randomX=[], randomY=[]; for (var i=0; i<=50; i++) { randomX[i] = Math.random()*400; randomY[i] = Math.random()*400;}
    var data = randomX.concat(randomY); var x = d3.scale.linear() .domain([0, d3.max(randomX)]) .range([0, width]);
    var y = d3.scale.linear() .domain([0, d3.max(randomY)]) .range([height, 0]);
    var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g");
    svg.selectAll("scatter-dots") .data(randomY) .enter().append("svg:circle") .attr("cy", function(d) {return y(d); } ) .attr("cx", function(d,i) {return x(randomX[i]); } ) .style("fill", "brown") .attr("r", 5) .on("click", function(d,i) { d3.select(this) .append("svg:line") .attr("x1", 300).attr("y1", 300) .attr("x2", 50).attr("y2", 50) .style("stroke", "steelblue") .style("stroke-width", 3); }); </script>
  2. 我点击的点的坐标存储在哪里？我尝试了this.cx和this.cy，但他们都没有给我实际的坐标。

首先，您需要将line元素附加到顶级 SVG 或 g 元素，而不是 circle 元素，否则不会显示。因此，在单击处理程序中，您需要执行以下操作：

.on("click", function(d,i) {
      svg.append("svg:line")
        .attr("x1", 300).attr("y1", 300)
        .attr("x2", 50).attr("y2", 50)
        .style("stroke", "steelblue")
        .style("stroke-width", 3);
   });

您可以通过d3.event或圆本身的坐标获取单击的坐标，即

.on("click", function(d,i) {
  var x = x(randomX[i]),
      y = y(d);
});

甚至

.on("click", function(d,i) {
  var x = d3.select(this).attr("cx"),
      y = d3.select(this).attr("cy");
});
相关文章：