D3不應用類或ID

https://jsfiddle.net/asparism/yhr2t65t/1/D3不應用類或ID

在上述的jsfiddle，我不能給一個類或ID的內聯「矩形」的元素，並且雖然JS SVG應用適當的CSS着色，它贏得」對寬度應用.attr。

同樣，在另一個項目中我有一個大陣後面是：

var canvas = d3.select("body") 
    .append("svg") 
    .attr("width", 10000) 
    .attr("height", 1000); 



var bars = canvas.selectAll("rect") 
.data(ajaxArray) 
.enter() 
.append("rect") 
.attr("width", 3) 
.attr("height", function(d) { 
    return d/30; 
}) 
.attr("x", function(d, i) { 
    return i*3});

所有這一切都如預期不同的是它不會附加到CSS類顯示。我一直在從教程中學習，但我甚至不知道該如何在Google上找到答案。我必須在語法上忽略了.classed選擇器可以應用於哪些元素或哪些元素？無論我添加.class語句，它都不起作用。

爲什麼我無法將我的d3 svg元素鏈接到css類？

來源

2017-05-06 asparism

那麼，D3確實適用類和ID。你的問題在這裏是另一回事（其實很多東西）：

你沒有選擇你想要的矩形;
默認SVG寬度爲300px。你的正義超越了這一點;
對於SVG rects，沒有border：取而代之的是stroke;
更改類沒有任何影響，因爲在CSS中，ID是比類更具有特定，並且將覆蓋它。所以，你必須刪除ID（或者在課上添加!important）;

這是演示。 rect沒有datum類，它的寬度僅爲50px。 1秒後，中，類被添加，所述ID被移除並且寬度改變：

setInterval(function(){ 
 
    d3.select("rect").classed("datum", true).attr("id", null).attr("width", 200); 
 
}, 1000)

.datum { 
 
    stroke: blue; 
 
    stroke-width: 5px; 
 
} 
 

 
#what { 
 
    stroke: red; 
 
    stroke-width: 5px; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<div><svg><rect x="20" y="20" height="100" width="50" id="what"></rect></svg></div>

來源

2017-05-06 02:41:54

謝謝。但是選擇所有rects的正確方法是什麼？爲什麼有覆蓋默認svg寬度的問題？ – asparism

在那個你連接的小提琴中，你可以做'd3.select（「＃what」）'。這些類正在應用於「輸入」選擇。關於矩形的寬度，如果超出SVG寬度，則不會看到任何內容。 –

D3不應用類或ID

回答

相關問題