d3.jsの軸目盛ラベルのスタイル

次のスクリプトは、3つのラベルとタイトルを持つ点スケール軸を作成します。 body cssセレクタは、本文中のすべてのテキスト要素のfont-familyとfont-sizeを定義します。軸のタイトルはcssの規則の影響を受けますが、軸の目盛りのラベルはテキスト要素ではありますが、それはありません。私は、.axisテキストセレクタを使ってティックラベルスタイルを設定できることを知っています。たぶん私はここで何かを見逃しているかもしれませんが、ボディセレクターで目盛りラベルがレンダリングされないのはなぜですか？ここでd3.jsの軸目盛ラベルのスタイル

はコードです：

<!doctype html> 
<meta charset="utf-8"> 

<script src="d3.min.V4.js"></script> 

<style> 

body { 
    font-family: Courier; 
    font-size: 18px; 
} 

</style> 

<body> 

</body> 

<script> 

var margin = {top: 20, right: 60, bottom: 40, left: 70}, 
    width = 600, 
    height = 100; 

var svg = d3.select('body').append('svg') 
         .attr('width', width) 
         .attr('height', height); 

var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]); 

// Add the x Axis 
svg.append("g") 
    .attr("transform", "translate(0," + (height - margin.bottom) + ")") 
    .attr("class", "axis") 
    .call(d3.axisBottom(xScale) 
    ); 

//x axis title 
svg.append('text') 
    .text('Colors') 
    .attr('x', width/2) 
    .attr('y', height - 5) 
    .style("text-anchor", "middle"); 


</script>

出典

2016-11-11 spyrostheodoridis

はAPIによると、軸発電機は自動的にこの（デフォルトのスタイルであることコード、コンテナg要素のフォントサイズやダニのフォントファミリを設定します）APIの例からコピー：

//styles applied to the outer g element: 
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"> 
    <path class="domain" stroke="#000" d="M0.5,6V0.5H880.5V6"></path> 
    <g class="tick" opacity="1" transform="translate(0,0)"> 
     <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line> 
     <text fill="#000" y="9" x="0.5" dy="0.71em">0.0</text> 
    </g> 
    //etc... 
</g>

したがって、原因特異性と優先順位のルールに、このスタイルは、あなたのbody CSSスタイルに優先いるようです。

ダニを変更するには、CSSに（またはクラスまたはIDを使用して）textを指定する必要があります。

出典

2016-11-12 01:15:52

ありがとうございますが、これは私の質問には対応していません。軸のタイトル「色」もSVGテキストですが、本文のCSSセレクタの影響を受けます。 – spyrostheodoridis

はい、あなたは絶対に正しいです。ソースコードを読むことは常に良い習慣です！ – spyrostheodoridis

Gerardoが述べたように、APIはfill＃000をデフォルトとして描画します。回避策は、テキストを再選択してスタイルを変更することです。これは次のようなものです：

var xScale = d3.scalePoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]); 

// Add the x Axis 
var xTicks = svg.append("g") 
    .attr("transform", "translate(0," + (height - margin.bottom) + ")") 
    .attr("class", "axis") 
    .call(d3.axisBottom(xScale) 
    ); 

xTicks.selectAll('text').attr('fill', function(d){ 
    return d; 
    });

出典

2018-02-11 14:59:40

d3.jsの軸目盛ラベルのスタイル

答えて

関連する問題