は、Iインライン「RECT」要素へクラスまたはIDを与えることができない上記jsfiddleでクラスまたはID

Question

https://jsfiddle.net/asparism/yhr2t65t/1/

を適用しないD3、及びJSのSVGは、適切なCSS着色を適用しても、それはウォン.attrを幅に適用しないでください。それはCSSクラスに添付しないことを除いて期待通りに表示さ

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}); 

すべてそのうち：

同様に、別のプロジェクトで私が続いている大規模な配列を持っています。私はチュートリアルから学んできましたが、私はここで答えを見つけるために何をgoogleにするのかも分かりません。 .classedセレクタをどこに適用するか、どの要素を適用するかについて構文的に何か不足しているはずです。 .classステートメントをどこに追加しても、動作しません。

私のd3 svg要素をCSSクラスにリンクできないのはなぜですか？

Answer 1

まあ、D3はクラスとIDを適切に適用します。あなたの問題は他の何か（実際には、多くのもの）です：

1. あなたが望むrectを選択していません。
2. デフォルトのSVG幅は300ピクセルです。あなたのrectはそれを超えています。
3. 代わりにstrokeがあります。
4. クラスを変更しても効果がありません。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>