22

私は現在 D3.js を使用していますが、解決できない問題に遭遇しました。

「セット」という名前の列と「年」という名前の列を持つ 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;
                }
            });

このコードを修正して、クラス名を上書きするのではなく、追加のクラス名を追加するにはどうすればよいですか。

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

4

3 に答える 3

64

有用な代替アプローチがあります。または を使用して、要素にクラスを割り当てたり削除したりでき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; });

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

于 2013-04-19T12:05:57.623 に答える
17

両方のことを行う単一の関数が必要なだけですよね。おそらく、これらの線に沿った何か...

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;
        });
于 2013-04-19T10:45:32.167 に答える