0

作为更大项目的一部分，我想从点击处理程序中更新 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; });
});

我在jsfiddle中创建了它来演示。

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

有没有办法使这项工作？我知道在这个简单的示例中，我可以直接将 stroke-width 设置为 10，但我想了解为什么我不能在该函数中使用 val 属性。

此外，欢迎在任何部分提出更好风格的建议。

4

1 回答 1

0

'val'您通过函数设置的attr属性成为<line>元素的属性——而不是d绑定到它的模型的属性。d.val也是如此undefined，这就是中风不受影响的原因。

因此，您需要从<line>元素本身获取该属性值。要从该函数内部（您用于设置的那个stroke-width）获取该元素，您需要调用d3.select(this)，它会创建一个包含该元素（this位于该函数内部）的 d3 选择。

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

把它们放在一起，它看起来像这样：

.attr("stroke-width", function(d) { return d3.select(this).attr('val'); });
于 2013-10-11T23:40:40.370 回答