d3.js - 如何在 d3 选择之外引用/调用 d3 散点图中的数据

Question

我有一个 d3 散点图，想知道如何获取附加到单个记录（圆圈）的数据值，以便稍后在代码中调用它。假设我们有以下数据：

ID  X   Y
A   1   1
B   2   2
C   3   3

如何获得记录 B 的 X 值？

有谁知道怎么做？

谢谢

Answer 1

您可能需要显示更多代码，因为这取决于您附加数据的方式。但假设你有类似的东西

var circle = svg.selectAll("circle").data(myArrayOfDataObjects)
  .enter().append("circle");

您可以为您创建的 DOM 元素分配一个 ID 或类：

circle.attr("id", function(d) { return "dataRow" + d.ID; });

现在您可以使用 d3、plain JS 或您选择的库在以后获取 DOM 元素的句柄。D3 将其数据作为__data__属性附加到 DOM 元素上，因此您可以引用它来获取数据。D3 还提供了.datum()获取这个值的方法：

var myDataRow = d3.selectAll("#dataRowB").datum();
var xValue = myDataRow.X;

或者，在纯 JavaScript 中：

var myDataRow = document.getElementById("#dataRowB").__data__;
// etc

Answer 2

如果 jQuery 是一个选项，在您的 d3 中，您可以使用 jQuery.data()函数将 d3 数据直接附加到 SVG 元素。只需运行类似.each(function(d){ $(this).data(d) }).

然后，您可以在任何地方使用 访问数据$(selector).data()，其中selector指向您感兴趣的 DOM 元素或元素，例如'#RecordB'.

如果您的数据更复杂，（例如，d = {foo: 'foo', bar: 'bar'}），您将使用$(selector).data()[foo]在与选择器指向的任何内容相关联的数据中抓取任何键入“foo”的数据。