web-dev-qa-db-ja.com

D3.js関数の使用時に複数のクラスを適用する方法

私は現在D3.jsを使用していて、解決できないように見える問題に遭遇しました。

「Set」という名前の列と「Year」という名前の列があるCSVがあります。これらの列から値を引き出して、クラス名として使用したいと思います。これは私が現在持っているものです...

var circle = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("class", function(d) {
                if (d["Set"] == 1)
                {
                    return "set-1";
                }
                if (d["Set"] == 2)
                {
                    return "set-2";
                }
            });

これは完璧に機能し、各データポイントにクラス名を付けます。ただし、次のようにすると、「セット」のクラス名が「年」のクラス名で上書きされます。

var circle = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("class", function(d) {
                if (d["Set"] == 1)
                {
                    return "set-1";
                }
                if (d["Set"] == 2)
                {
                    return "set-2";
                }
            .attr("class", function(d) {
                if (d["Year"] == 2012)
                {
                    return "2012";
                }
                if (d["Year"] == 2013)
                {
                    return "2013;
                }
            });

このコードを修正して、クラス名を上書きするのではなく、追加のクラス名を追加する方法を教えてください。

誰かが助けてくれることを願っています。

javascripthtmlcsssvgd3.js
22
Dally

あなたは、両方ではない単一の機能が欲しいだけです。これらの線に沿った何か...

var circle = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", function(d) {
            var c = "";
            if (d["Set"] == 1)
            {
                c = "set-1";
            }
            if (d["Set"] == 2)
            {
                c = "set-2";
            }
            if (d["Year"] == 2012)
            {
                c += " 2012";
            }
            if (d["Year"] == 2013)
            {
                c += " 2013;
            }
            return c;
        });
15
Robert Longson

便利な代替アプローチがあります。 selection.classed('class-name', true)またはselection.classed('class-name', false)を使用して、要素にクラスを割り当てたり削除したりできます。

var circle = svg.selectAll("circle")
    .data(data)
    .enter()
    .append('circle')
    .classed('2012', function(d) { return d['Year'] === 2012; })
    .classed('2013', function(d) { return d['Year'] === 2013; })
    .classed('set-1', function(d) { return d['Set'] === 1; })
    .classed('set-2', function(d) { return d['Set'] === 2; });

同じ構文を使用して要素からクラスを削除できるため、この方法をお勧めします。

62
Pablo Navarro

更新

このアプローチは、D3.js v5以降では受け入れられないようです。

元の答え

classed関数の引数としてハッシュを使用することもできます：

var circle = svg.selectAll("circle")
  .data(data)
  .enter()
  .append('circle')
  .classed({
    '2012': function(d) { return d['Year'] === 2012; },
    '2013': function(d) { return d['Year'] === 2013; },
    'set-1': function(d) { return d['Set'] === 1; },
    'set-2': function(d) { return d['Set'] === 2; }
  });
18
Ivan Black