d3js使用在同一個回調中更新的屬性

Question

作爲較大項目的一部分，我想從點擊處理程序中更新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.

有沒有辦法使這項工作？我明白，在這個簡單的例子中，我可以直接將筆畫寬度設置爲10，但我想了解爲什麼我不能在該函數中使用val屬性。

此外，任何部分的更好風格的建議是受歡迎的。

Answer 1

的'val'您通過attr功能設置成爲<line>元素的屬性 - 綁定到它的模型d的不是。所以d.val是undefined，這就是爲什麼中風不受影響。

因此，您需要從<line>元素本身獲取該屬性值。要從功能（你正在使用一個設置stroke-width）內獲得該元素的保留，你需要調用d3.select(this)，它會創建一個包含元素（這是this該函數內部）一D3的選擇。

然後獲取其val屬性，你需要調用attr('val')對D3的選擇。當你調用attr跟單，串PARAM它作爲一個getter，而不是制定者，所以它會返回10你完成設置。

全部放在一起，它看起來像這樣：

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