画像フィットモード

imagePath ノードは絵を描きますが、その絵が形状にどのように配置されるかは問題ですあなたに — imageFit (値、またはノードごとに異なることができるように (node) => …) を設定します。ここでは、1 つの風景のスクリーンショットが同じ正方形に 3 つの方法でレンダリングされ、4 つ目のスクリーンショットが表示されます。ソースが欠落している四角形 (フォールバックを表示するため)、およびその下の 'frame' ノードそれは画像自体の形をとります:

'icon' (デフォルト) — 形状を中心とした小さな画像 (~1.2× size)、側面は保存されています。これは従来の外観です。色付きの図形が周囲に表示されるので、画像は、他のアイコンクラスのノードと並んで icon として読み取られます。
'cover' — 画像は図形のボックス (2× size) を埋め、次のように切り取られます。アスペクト比を維持します。ストロークが細いと読み取れる、きれいに塗りつぶされたサムネイル border — スクリーンショット/添付ノードに適合します。
'contain' — 写真全体がボックス内に収まり、レターボックス化されます。形の color は、正方形でない画像のバーに表示されます。
'frame' — ノードが画像になります: 画像独自のアスペクトに合わせてサイズ変更されます比率 (最長辺 = 2× size) なので、スクリーンショット全体がフル解像度で表示されますストロークがそれに沿って描かれています。クロップもレターボックスバーもありません。 shape は無視されます ( 写真はノードです）。スクリーンショットや添付ファイルのプレビューに最適です。

画像のソースをロードできない場合、ノードは取り消し線の画像に劣化します。ブラウザの壊れたイメージグリフの代わりのプレースホルダー — 4 番目の四角形を参照してください。 imagePath ポイントはどこにもありません。同じ優雅なフォールバックが画像のどこにでも現れますそれ以外の場合は、ホバープレビュー、ツールチップ、およびフル解像度のライトボックスが表示されます。

ノードごとに解決されるため、1 つのグラフでモードを混在させることができます — スクリーンショット 'frame' または 'cover'、その他の添付ファイル 'icon' — ノードのデータから直接取得。成長中 size 画像を比例的に拡大縮小するため、相対的な境界線は同じままになります (固定インセットはありません)。

オプションデータ

const options = {
    // Static legend: fx/fy pin the nodes, no forces so nothing drifts.
    simulation: { enabled: false },
    render: {
        defaultNodeStyle: {
            size: 44,
            text: (node) => node.getData()?.name,
            textVerticalShift: -1.6
        }
    }
}

// A landscape raster shared by all nodes so the fit modes differ visibly
// (a square/vector image would make `cover` and `contain` look identical).
const pic = new URL('./sample.png', import.meta.url).href
// A sibling path with no file behind it, to show the missing-image fallback.
// Derived from `pic` at runtime so the build never tries to resolve a missing asset.
const missingPic = new URL('missing.png', pic).href
const data = {
    nodes: [
        { id: 'icon', fx: -285, fy: 0, data: { name: "'icon'" },
          style: { shape: 'square', imagePath: pic, imageFit: 'icon', color: '#f1f5f9' } },
        { id: 'cover', fx: -95, fy: 0, data: { name: "'cover'" },
          style: { shape: 'square', imagePath: pic, imageFit: 'cover',
                   strokeColor: 'rgba(255,255,255,.55)', strokeWidth: 2 } },
        { id: 'contain', fx: 95, fy: 0, data: { name: "'contain'" },
          style: { shape: 'square', imagePath: pic, imageFit: 'contain', color: '#1f2937',
                   strokeColor: 'rgba(255,255,255,.55)', strokeWidth: 2 } },
        // Missing source: the picture can't load, so the node degrades to a
        // crossed-out-picture placeholder instead of a broken-image glyph. The
        // same fallback appears in the hover preview, tooltip and lightbox.
        { id: 'missing', fx: 285, fy: 0, data: { name: 'missing' },
          style: { shape: 'square', imagePath: missingPic, imageFit: 'cover', color: '#1f2937',
                   strokeColor: 'rgba(255,255,255,.55)', strokeWidth: 2 } },
        // 'frame': the node takes the picture's own aspect ratio, so the whole
        // screenshot shows at full resolution with the stroke hugging it — no crop,
        // no letterbox bars. Bigger `size` just makes the framed picture bigger.
        { id: 'frame', fx: 0, fy: 360, data: { name: "'frame'" },
          style: { imagePath: pic, imageFit: 'frame', size: 176,
                   strokeColor: 'rgba(255,255,255,.55)', strokeWidth: 2 } }
    ],
    edges: []
}

画像フィットモード ​

画像フィットモード