Javascript 使用在同一回调中更新的属性的d3js

作为一个更大项目的一部分，我希望从单击处理程序中更新SVG行的属性，然后在回调中使用该属性。我是d3新手，对javascript没有太多经验，所以我怀疑我可能对这种语言的工作原理有一些基本的误解

我将其归结为一个简单的例子：

var lines = [
   { "x1": 50, "y1": 50, "x2": 350, "y2": 150 },
   { "x1": 50, "y1": 150, "x2": 350, "y2": 50 }
];

var svg = d3.select("body")
    .append("svg")
    .attr("width", 400)
    .attr("height", 200);

var lines = svg.selectAll("line")
    .data(lines)
    .enter().append("line")
    .attr("x1", function(d){return d.x1;})
    .attr("y1", function(d){return d.y1;})
    .attr("x2", function(d){return d.x2;})
    .attr("y2", function(d){return d.y2;})
    .attr("stroke-width", 2)
    .attr("stroke", "#00b000");

lines.on("click", function ()  {

    svg.selectAll("line")
        .attr("val", 10);

    svg.selectAll("line")
        .attr("stroke", "#b000b0")
        .attr("stroke-width", function(d) { return d.val; });
});

我在中创建它是为了演示

在点击处理程序中，我正在更新“val”属性，然后尝试使用该属性设置笔划宽度。我的期望是，单击线条时，笔划宽度将更改为10，但它似乎会更改为1

有没有办法让这一切顺利进行？我知道在这个简单的例子中，我可以直接将stroke width设置为10，但我想了解为什么我不能在该函数中使用val属性

---

此外，欢迎在这部分的任何部分推荐更好的样式。

通过

attr

函数设置的

'val'

将成为

元素的属性–而不是绑定到它的模型

d

。因此

d.val

是

未定义的

，这就是笔划不受影响的原因

因此，您需要从

元素本身获取该属性值。要从该函数（用于设置

笔划宽度的函数）内部获取该元素，需要调用
d3。选择（this）
，这将创建包含该元素的d3选择（即该函数内部的
this
）

然后，要获取其
val
属性，您需要对d3选择调用
attr（'val'）
。当您使用单个字符串参数调用
attr
时，它充当getter，而不是setter，因此它将返回您在其上设置的
10

综上所述，它看起来是这样的：

.attr("stroke-width", function(d) { return d3.select(this).attr('val'); });

这个答案就是这个问题的确切答案。非常感谢你！这实际上有助于我对d3的理解。