D3 - 检索与图表中点击元素相关联的数据

以下是一个使用D3.js库来实现检索与图表中点击元素相关联的数据的示例代码：

// 创建一个包含数据的数组
var data = [
  { name: "A", value: 10 },
  { name: "B", value: 20 },
  { name: "C", value: 30 }
];

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

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

// 点击事件处理函数
function handleClick(d) {
  console.log("点击元素的数据:", d);
}

// 输出点击元素的数据
rects.on("click", handleClick);

在上面的代码中，我们首先创建一个包含数据的数组，并创建一个SVG元素作为容器。然后，我们使用D3.js的selectAll()、data()和enter()方法来创建一个矩形元素，并绑定数据。在矩形元素上添加了一个点击事件处理函数handleClick()。

在点击事件处理函数中，我们可以通过参数d来获取与被点击元素相关联的数据。在这个示例中，我们只是简单地将数据打印到控制台上，你可以根据你的需求进行进一步的处理。

最后，我们使用on()方法将点击事件处理函数绑定到矩形元素上，这样当点击矩形元素时，就会触发点击事件，并调用相应的处理函数。