Question

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

我被困在两个地方：

使用以下代码，为什么我的行现在显示？ <!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>
我点击的点的坐标在哪里？我尝试了this.cx和this.cy，但没有一个给我实际坐标。

Answer 1

首先，您需要将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");
});

D3：点击散点图中的圆圈时添加一条线

1 个答案: