d3 - 访问我点击区域后的数据

以下是一个使用D3.js的示例代码，可以在点击区域后访问数据：

// 创建一个包含数据的数组
var data = [10, 20, 30, 40, 50];

// 创建一个SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 200);

// 创建一个矩形元素并绑定数据
var rects = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return i * 50; })
  .attr("y", 50)
  .attr("width", 40)
  .attr("height", function(d) { return d; })
  .on("click", handleClick); // 添加点击事件处理函数

// 点击事件处理函数
function handleClick(d, i) {
  console.log("点击的索引：" + i);
  console.log("点击的数据值：" + d);
}

在上述示例中，我们创建了一个包含数据的数组，并创建了一个SVG容器。然后，我们使用D3.js的选择器选择SVG容器，并使用selectAll()和data()方法来绑定数据。

接下来，我们使用enter()和append()方法创建了矩形元素，并使用数据的值设置矩形的高度。我们还添加了一个点击事件处理函数handleClick()，并使用on()方法将其绑定到矩形上。

在点击事件处理函数中，我们可以通过参数d访问点击区域对应的数据值，通过参数i访问点击区域的索引值。在示例中，我们将点击的索引和数据值输出到控制台。