d3.js - 如何将 SVG 元素的属性传递给 D3 中的新事件？

Question

当我在 D3 中单击鼠标时，我试图返回矩形的“类”和“子任务”属性的值。

var projectRectangles = rectangles.append("rect")
    .attr("id", function(d) { return (d)[7]; })
    .attr("class", function(d) { return (d)[3]; })
    .attr("subtasks", function(d) { return (d)[4]; })
    .on("click", function() {expandTasks(this.id, this.class, this.subtask); });

function expandTasks(task_id, task_subtasks, task_class) { alert(task_id + '/' + task_subtasks + '/' + task_class);};

示例响应:1/undefined/undefined

它返回 this.id 很好，但 this.class 和 this.subtasks 总是返回“未定义”。 'class' 和 'subtasks' 在属性中看起来很好，那么为什么它适用于 id，而不适用于其他人？

最后，当然，我想知道将这些属性传递给另一个函数的最佳方式。

谢谢，
基思

Answer 1

您必须在单击监听器中获取类和子任务属性，如下面的代码所示。

d3.select(this).attr("class");
d3.select(this).attr("subtasks");

您也可以使用 this.className获取类属性。但由于 subtasks是自定义属性，您必须使用 d3 attr 来获取它方法或 html getAttribute方法。

要将属性从单击监听器传递给其他一些函数，请尝试下面显示的任何方法。

The parameter d gives the data object binded to the corresponding element.

.on("click", function(d) {
    expandTasks(d[7],d[3],d[4]); 
});

或者

.on("click", function(d) {
    var id = d3.select(this).attr("id"); // or this.id
    var className = d3.select(this).attr("class");// or this.className
    var subtasks = d3.select(this).attr("subtasks"); // or this.getAttribute("subtasks");
    expandTasks(id,className,subtasks); 
});