Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Absolute spacing between facets

オープン
  • 何か問題がありますか？
#2,402 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
45/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
静か
技術スタック
javascript
領域
data-visualization

調査の方向性

Issue にリンクされている facet scales と discrete scales のドキュメントから始め、次に、異なる高さで fy.padding を使用している vertical-bars の例を比較します。facet の寸法が変化したときに固定サイズの間隔がどのように動作すべきかを定義し、x-axis を繰り返し使用するユースケースで要求されたスペースが維持されることを検証します。

索引モデルが issue の本文から書いたものです。

説明

enhancement
Status Quo

Currently the spacing between facets needs to be set via the implied band scale’s padding option. [1] However, that option only allows adjusting the spacing relative to the band width (or height). [2]

Motivation

For my use case, I’d like to reserve some space between the facets to repeat the x axis between them. Since I know the amount of space the tick labels will need, I’d like to instruct Plot to leave a gap of a certain fixed size.

Problem

With the current API I need to guess the amount of space Plot will use for a single facet and find a fraction that will leave an appropriate amount of space. If Plot decides that a facet should be larger (in the examples below I forced bigger facets), then my space is at risk of being too small or too large.

Examples

The examples are based on [3].

Appropriate spacing
Plot.plot({
  fy: {
    padding: .15
  },
  marks: [    
    Plot.barY(brands, {
      x: "name",
      y: "value",
      fy: (d, i) => i % 3,
    }),
    Plot.axisX({
      facetAnchor: null,
    })
  ],
})
Image
Excessive spacing
Plot.plot({
  fy: {
    padding: .15
  },
  marks: [    
    Plot.barY(brands, {
      x: "name",
      y: "value",
      fy: (d, i) => i % 3,
    }),
    Plot.axisX({
      facetAnchor: null,
    })
  ],
  height: 1000,
})
Image

[1] https://observablehq.com/plot/features/facets#facet-scales
[2] https://observablehq.com/plot/features/scales#discrete-scales
[3] https://observablehq.com/@observablehq/plot-vertical-bars-rotated-labels

主要言語
HTML
スター
5.4k
フォーク
250
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

observablehq/plot のほかの issue

observablehq/plot の issue をすべて見る

似ている issue

Data Visualization の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。