web-dev-qa-db-ja.com

d3は関数で複数のクラスを追加します

私は次のように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);

機能しません。どうやってやるの？

ありがとう

javascriptjqueryd3.js
33
Yujun Wu

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

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

しかし、本当に必要なのは、 HTML5 data- attributes を使用する方がはるかに良い要素にデータプロパティを割り当てることです。だからあなたができる：

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

その後、ユーザーの名前を取得します。

d3.select(".user").attr("data-name")
65
Ilya Boyandin

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

元々考えていたものに近い、データの重複なしに簡単に実行できます。

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

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

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

とても古いブラウザでは動作しないかもしれません。

0
user2728841