風格和attr在D3.js

Question

我是新來的D3.js和tutorial。

我很困惑爲什麼circle.style（「fill」，「steelblue」）;下面的不生效;但如果將樣式行放在circle.enter（）。append（「circle」）行後面，它可以將顏色填充到所有圓圈。據我瞭解，風格是全球性的，應該適用於所有的圈子，或者至少在以下代碼中影響html中現有的圈子。

//js 
var svg = d3.select("svg"); 
var circle = svg.selectAll("circle").data([32, 57, 112, 293], function(d) { return d; }); 
circle.style("fill", "steelblue"); 
circle.enter().append("circle") 
    .attr("cy", 60) 
    .attr("cx", function(d, i) { return i * 100 + 30; }) 
    .attr("r", function(d) { return Math.sqrt(d); }); 
circle.exit().remove(); 



//html 
<svg width="720" height="120"> 
<circle cx="40" cy="60" r="10"></circle> 
<circle cx="80" cy="60" r="10"></circle> 
<circle cx="120" cy="60" r="10"></circle> 
</svg> 

謝謝！

Answer 1

代碼首次運行時，圓選擇的大小爲零，因爲沒有與該鍵匹配的元素。所有的圓形元素將被放入退出選擇。 data方法返回最初爲空的更新選擇，它的（第二維）長度等於傳遞給.data的第一個參數的第一維的長度，但選擇的每個元素爲null。直到enter方法被執行，新的節點被創建並且enter和update選項被合併。

如果代碼再次運行，例如將一個數據元素替換爲新值，那麼這三個匹配節點將被放入更新選擇中，並且將由.data返回。不匹配的將被放置在退出選擇中，並且其更新選擇中的舊位置將被設置爲空。帶有新數據元素的一個佔位符對象將被放置在輸入選擇中，該輸入選擇將在.append之後引用新創建的節點，並且將被合併到.enter的更新選擇中。

如果您沒有使用密鑰函數，那麼第一次，三個現有節點將在更新選擇中，以及一個空值，並且一個佔位符將被放入帶有數據的輸入選擇中（在這種情況下值爲293）。退出選擇將爲空（長度爲0），並且將創建一個新節點，並將新節點添加到輸入選擇中，同時綁定新數據元素。此時，更新選擇（circle）將使輸入選擇與它合併。它的空條目已被新節點所取代，並且新數據綁定了它。這是致電.enter的副作用。但是，如果您再次調用代碼，並且數據元素的順序發生了變化（仍然具有相同的一組值，但是它們都位於數組的不同位置），則退出和輸入選擇將爲空，但綁定到所有節點的數據值將會改變。如果您在這種情況下使用了密鑰，則不會有任何更改。