7

私は d3.js を使用して JavaScript チャートを作成しており、スタイリングと動作を可能な限り分離しようとしています。これを行うために、.style() メソッドを使用するのではなく、.attr('class','...') メソッドを使用して CSS クラスを適用しようとしています。ほとんどの場合、すべてがうまく機能します。ただし、CSS クラスを適用して一部のテキスト要素のストロークと塗りつぶしを設定しようとすると、うまくいきません。私が混乱している部分は、.attr() を使用して css クラスを適用する同じプロセスがグラフのバーに対して正常に機能し、正確な方法を使用する場合にテキストをどのようにスタイリングしても問題がないという事実です。同じ属性ですが、代わりに .style() メソッドを使用してそれぞれを個別に設定します。さらに奇妙なことに、.attr() メソッドを使用して、css を介して透過性クラスを問題なく適用できます。私がここに欠けているものはありますか？

問題の css クラスは次のとおりです。

    .black {
    fill: rgb(41,41,41);
    stroke: rgb(41,41,41);
 }

 .red {
    fill: rgb(238,77,77);
    stroke: rgb(238,77,77);
    color: rgb(238,77,77);
 }

 .blue {
    fill: rgb(76,179,230);
    stroke: rgb(76,179,230);
 }

 .white {
    fill: rgb(255,255,255);
    stroke: rgb(255,255,255);
 }

これは、何らかの理由で機能しないコードです。

 var severityText = chart.selectAll(".severity")
        .data(array)
        .enter().append("text")
        .attr("x", function (d, i) { return x(i) + barWidth / 2 - (5.0/8)*barNumberSize; })
        .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius / 2 - bubbleNumberSize*(1.0/4) })
        .style("font-size", bubbleNumberSize.toString() + "px")
        //this line isn't doing its job
        .attr('class','white')
        .attr('class','transparent')
        .text(function (d, i) { return d['severity'].toString() });

このコードは次のことを行います。

var severityText = chart.selectAll(".severity")
        .data(array)
        .enter().append("text")
        .attr("x", function (d, i) { return x(i) + barWidth / 2 - (5.0/8)*barNumberSize; })
        .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius / 2 - bubbleNumberSize*(1.0/4) })
        .style("font-size", bubbleNumberSize.toString() + "px")
        //works fine when written in this format.....why?
        .style('fill',white)
        .style('stroke',white)
        .attr('class','transparent')
        .text(function (d, i) { return d['severity'].toString() });
4

2 に答える 2

21

classed を使用することをお勧めします

.classed('white', true);

あるいは

.classed('white transparent', true);

これにより、後で設定/削除されたクラスを保持する多くの帳簿が節約されます。データ提供のクラス名を追加するのはより困難です。http://bl.ocks.org/clemens-tolboom/7231676を参照してください。

于 2013-11-03T16:56:10.223 に答える
6

複数のクラスを設定するには、上書きされる呼び出しを連鎖させるのではなく、それらすべてを含む単一の文字列を使用します。

つまり、代わりに

.attr('class','white')
.attr('class','transparent')

行う

.attr('class', 'white transparent')
于 2013-06-12T15:43:00.337 に答える