从基准访问 d3.js 元素属性？

Posted 2023-02-22

【中文标题】从基准访问 d3.js 元素属性？

【英文标题】：Accessing d3.js element attributes from the datum?

【发布时间】：2012-07-05 09:08:08

【问题描述】：

我正在尝试使用 d3.js 的 .data() 函数访问我已经在屏幕上绘制的某些特定 svg 圆圈的 cx 和 cy 属性，有人可以帮忙吗？尝试访问它的代码如下。

d3.selectAll(".mynode").each( function(d, i)
  if(d.someId == targetId)
    console.log( d.attr("cx") );    // just trying to demo my point, doesn't work
  

我对 d3.js 和 javascript 还是很陌生，所以我不确定我是否要从头到尾处理这个问题，或者我可能错过了内置解决方案？

【问题讨论】：

你试过 d.cx 吗？如果您在 d3.selectAll(".mynode") 上调用 .data，并且 data 的参数包含带有 cx 字段的对象，那应该可以。

【参考方案1】：

您的代码试图从数据项中获取 svg 属性，而您真正想要的是从 svg DOM 元素中获取该属性，如下所示：

console.log(d3.selectAll(".mynode").attr("cx"));

这只会给你选择的第一个非空元素的属性；你也可以filter你的选择来获取你正在寻找的DOM元素：

console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx"));

或者，如果您想访问所有选定元素的属性，请在每个函数中使用 this：

d3.selectAll(".mynode").each( function(d, i)
  if(d.someId == targetId)
    console.log( d3.select(this).attr("cx") );
  

【讨论】：

我之前使用的是d3.select(this).attr("cx")，但它返回了null，我最终意识到我正在请求一个svg组元素的cx属性（doh！），我不得不将其修改为d3.select(this.firstChild).attr("cx") 要访问我在 group 元素中的 circle 元素，我不喜欢使用 firstChild/lastChild 等，但它现在可以使用。如果您没有建议，我也不会考虑过滤方法，我仍然不完全确定在搜索特定基准值时如何实现它，但谢谢！

我还要补充一点，如果您尝试在命令链的早期访问它并且尚未设置特定值，它可能会返回 null。

【参考方案2】：

还有更简单的方法：（提供索引i）

d3.selectAll("circle")[0][i].attributes.cx.value

可以看到here。

【参考方案3】：

接受的答案中的过滤方法是正确的。接受答案中的第二种方法（使用 .each）是不正确的，并且包含与提问者相同的错误：如果未调用 .data() （这里就是这种情况），则第一个参数 d 传递给 .each将是未定义的（而不是“当前的 dom 节点”，正如所有新手，包括我自己所期望的那样）；您通过 d3.select(this) 获得的当前 dom 节点，这在最后的 if 语句中是正确的 - 错误在 if 测试条件中。正确的版本如下。

d3.selectAll(".mynode").each(function(d,i)
    var elt = d3.select(this);
    if (elt.attr("id") == "yourTargetIdGoesHere")
        console.log( elt.attr("cx") );
    
);

fiddle：fiddle（包含两个版本的代码，即过滤器和每个）

更新：我的回答是假设您没有使用 .data()，因为您没有为此提供代码；后来我看到你写道你确实使用了 .data()

在这种情况下，根据您的数据结构，将 d.attr("cx") 替换为普通的 d.cx 可能会起作用。

【参考方案4】：

这里最简单的是给每个节点一个唯一的 id，然后选择具有目标 id 的节点来运行你的转换。