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

Neptunemo 发表于 Dev

海王星

当我在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总是返回“ undefined”。“类”和“子任务”在的属性中看起来不错，那么为什么它对id有效，但对其他无效？

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

谢谢，基思

吉尔莎

您必须在点击监听器中获取以下代码所示的class和subtasks属性。

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

您也可以this.className用来获取class属性。但是由于subtasks是自定义属性，因此您必须使用d3attr方法或htmlgetAttribute方法来获取它。

要将属性从单击侦听器传递到其他一些功能，请尝试下面显示的任何方法。

参数d给出绑定到相应元素的数据对象。

.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); 
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。