web-dev-qa-db-ja.com

目盛りラベルに影響を与えずに、d3チャートの軸線の太さ/幅を変更します

Power Bi d3グラフを作成していて、グラフの軸線の太さ/幅を変更しようとしています。この次のコードは、線の幅を変更しますが、目盛りのラベルにも影響を与え、フォントを大幅に変更します。

this.xAxis
   .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'}) 
   .call(xAxis);

ダニのラベルに影響を与えたくない。軸線のみを変更するにはどうすればよいですか？

d3.jstypescriptpowerbi
5
Marc Pincince

powerbiについては何も知りませんが、this.xAxisは、すべての軸コンポーネントをグループ化するg要素です。 gは直接スタイル設定されないため、その下にあるすべての要素（text要素を含む）が継承されます。

したがって、ここでの答えは、スタイルをより具体的にすることです。あなたはこれを行うことができます

this.xAxis.select('path')
  .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'});

これは、軸の水平線をjustスタイルします。または：

this.xAxis.selectAll('line')
  .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'});

目盛りのスタイルを設定します。

余談ですが、私はこのようなスタイルをまったく使用せず、おそらく従来のCSSを使用してスタイルを設定します。

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  stroke-width: 10px;
}

これにより、軸全体のフォントがgに設定され、軸を横切る目盛りと線が黒く太く設定されます。

16
Mark