javascript - d3関数で複数のクラスを追加する

Question

私はsvgを次のように持っています：

<g class="user" title="Michael" rel="tooltip" transform = "rotate(-12.364052661705784)translate(360)" style="fill: #9467bd; "></g>

タイトルと同じクラスを追加したい。私は試した

d3.selectAll('.user').attr('class','Michael');

しかし、それは元のクラスを置き換えました。それから私は試しました

d3.selectAll('.user').classed('Michael',true);

できます！しかし今、私は次のような関数でクラス名を返したいです

d3.selectAll('.user').classed(function(){return this.attr('title');},true);

動作しません。どうやってやるの？

ありがとう

score 86 · Accepted Answer

名前をスペースで区切るだけで、要素に複数のクラスを割り当てることができます。

d3.selectAll(".user").attr("class", "user Michael");

しかし、本当に必要なのは、HTML5データ属性を使用する方がはるかに優れている要素にデータプロパティを割り当てることだと思われます。だからあなたはすることができます：

d3.selectAll(".user").attr("data-name", function(d,i) { return "Michael #" + i; });

その後、ユーザーの名前を取得するには、次のようにします。

d3.select(".user").attr("data-name")

score 9 · Accepted Answer

なぜHTML5データ属性を使用し、title属性にすでに存在するデータを複製するのですか？HTML5データ属性は確かに便利ですが、データを複製することは良いことではありません。

データの重複がなく、当初考えていたものに近いため、簡単に実行できます。

d3.selectAll('.user').each(
    function(){
        var elt = d3.select(this);
        elt.classed(elt.attr("title"), true);
    }
)

score 5 · Accepted Answer

クラスを追加するだけの場合は、d3からジャンプして、クラスリストを使用できます。

d3.selectAll('.user').node().classList.add("mynewclass");

非常に古いブラウザでは動作しない可能性があります。

score 0 · Accepted Answer

d3.select().classed()Ilyaの答えは良いですが、ボックス内に留まりたい場合、データからクラスを追加する最良の方法は、を使用しattrてクラスを追加することです。

.attr('class', function (d) { return d.class })

ただし、これによりクラスがそのクラスに置き換えられるため、複数のクラスを追加する場合は、1行で追加する必要があります。

.attr('class', function (d) { return d.class + " " + d.otherclass})

クラスを実際に追加できないため、これは制限されていますが、OPの問題も解決すると思います。

4 に答える 4