2

X時間軸を使用して、かなり規則的なグラフに取り組んでいます。軸コードはかなり標準的です:

var xScale = d3.time.scale()
                .domain([tlState.startdate.getTime(), tlState.enddate.getTime()])
                .range([0, width]);
            var xHourAxis = d3.svg.axis()
                .scale(xScale)
                .ticks(d3.time.hours, 6)
                .tickFormat(d3.time.format("%_Hh"))
                .tickSize(5,1)
                .orient('bottom');
            root.append('g')
                .attr('class', 'axis')
                .attr("transform", "translate(" + 0 + "," + height + ")")
                .call(xHourAxis);

関数は、軸のtsState.*開始日/終了日を返すだけです。私の問題: 軸の目盛りラベルは表示されていますが、目盛りが表示されません。それらは明らかに DOM ツリー ( <line y2="5" x2="0"></line>) にありますが、「ストローク」属性を白以外に明示的に設定した場合にのみ非表示になります。

これは、CSS を使用して目盛りにストロークを設定することで簡単に解決できます...しかし、そもそも目盛りが見えないのはなぜですか? 私はグーグルで調べましたが、目盛りのデフォルトのストロークの色を示すものは何も見つかりませんでした...

ヒントをありがとう、wwwald

4

1 に答える 1

6

SVG 仕様によると、ストロークのデフォルト値は ですnone。d3 は、ストロークのみを表示し、塗りつぶしを表示しない目盛りのパスを使用するため、スタイルを設定するまで何も表示されません。

彼らがなぜそれを決めたのかはわかりません。図形に境界線を追加するのを少し簡単にするためかもしれません。stroke-width のデフォルトは 1 であるため、ボーダーを追加するには、1 つの属性を変更するだけで済みます。stroke が 以外の値である場合none、 stroke-width はデフォルトで 0 にする必要があり (デフォルトでテキストにストロークを与えたくない!)、初めてストロークを設定するのは少し直感に反するでしょう:ストロークを確認する前に、ストローク幅を正の数に変更する必要があります。

d3 がこの問題を解決しないのはなぜですか? d3 の軸は SVG の上に構築されており、一般に d3 では、上に構築されている標準 (css/html/svg) と密接に連携できます。これにより、メディアを限界まで押し上げることができますが、これらの問題に遭遇することもあります.

于 2013-10-11T13:46:22.847 に答える