Cytoscape.js SVG नोड चित्र: फ़िट और खाली जगह ठीक करें

नोड की background-image शैली में SVG चित्र URL इस्तेमाल करें, फिर दिखाई जाने वाली कलाकृति के लिए फ़िट चुनें। बैज लोड हो पर बहुत छोटा दिखे तो ग्राफ़ नोड बड़ा करने से पहले SVG viewport की खाली जगह जाँचें। सिरे गायब हों तो चित्र का अनुपात नोड से तुलना करें और क्लिपिंग जाँचें।

Cytoscape.js SVG नोड बैकग्राउंड का दस्तावेज़ देता है, जिसमें contain, cover और none फ़िट शामिल हैं। यह गाइड स्रोत सीमा को ग्राफ़ शैली से अलग करने के लिए हमारा मूल एक-पाथ बैज लेती है। संपादन योग्य कलाकृति मास्टर को ग्राफ़ कॉन्फ़िगरेशन के साथ रखें।

स्रोत चित्र को ग्राफ़ नोड से अलग समझें

तीन बॉक्स जाँचने हैं: कलाकृति का खींचा हुआ क्षेत्र, SVG चित्र viewport और नोड का मुख्य भाग। SVG viewBox स्रोत निर्देशांक का वह आयत तय करता है जिसे viewport में मैप किया जाता है। उसमें दिखाई देने वाले चित्र से कहीं अधिक जगह हो सकती है।

हमारा कम मार्जिन वाला स्रोत 120 × 60 है, जिसमें मूँगा रंग का बैज x=6 से x=114 और y=6 से y=54 तक है। केंद्र का खुला भाग उसी पाथ का हिस्सा है:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg"
     width="120" height="60" viewBox="0 0 120 60">
  <path fill="#f36f59" fill-rule="evenodd"
    d="M6 30L30 6H90L114 30L90 54H30Z M50 20H70V40H50Z"/>
</svg>

अधिक खाली जगह वाला रूप केवल बाहरी SVG आयाम और viewBox बदलता है:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="140" viewBox="-40 -40 200 140">

वही हेडर, पाथ और समापन टैग रखें। दोनों फ़ाइलें समान पाथ निर्देशांक बनाती हैं। दूसरी उनके चारों ओर अधिक स्रोत खाली जगह रखती है। वह जगह चित्र के साथ स्केल होती है, इसलिए बैकग्राउंड फ़िट बदलना उपयुक्त स्रोत सीमा चुनने का विश्वसनीय विकल्प नहीं है। फ़ाइल viewport और दिखाई देने वाली कलाकृति न मिलें तो SVG बाउंडिंग बॉक्स गाइड मदद करती है।

चार मामलों वाला उदाहरण चलाएँ

हमने Cytoscape.js 3.34.3 को उस निश्चित संस्करण के आधिकारिक ब्राउज़र बंडल से स्थानीय रूप से सर्व करके जाँचा। उस रिलीज़ टैग का बंडल नीचे के example.html के पास cytoscape-3.34.3.min.js नाम से सहेजें। फ़ोल्डर को स्थानीय HTTP से सर्व करें, जैसे python3 -m http.server 8000, और http://localhost:8000/example.html खोलें।

उदाहरण मूल SVG को डेटा URI में एन्कोड करता है। encodeURIComponent() URI अक्षरों को एस्केप करता है, जिसमें हमारे भरण रंग का # भी है। लाइब्रेरी का SVG मार्गदर्शन Base64 के बजाय यह एन्कोडिंग और यहाँ दिखाया XML हेडर सुझाता है। यह एक स्वयंपूर्ण बैज है जिसमें बाहरी फ़ॉन्ट या चित्र नहीं हैं।

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG node fit comparison</title>
<style>
  body { font: 16px system-ui; margin: 20px; }
  #cy { width: 1100px; height: 250px; border: 1px solid #ddd; }
  #status { white-space: pre-wrap; }
</style>
<div id="cy"></div>
<pre id="status">Loading images</pre>
<script src="cytoscape-3.34.3.min.js"></script>
<script>
const header = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg>';
const path = 'M6 30L30 6H90L114 30L90 54H30Z M50 20H70V40H50Z';
function artwork(padded) {
  const width = padded ? 200 : 120;
  const height = padded ? 140 : 60;
  const viewBox = padded ? '-40 -40 200 140' : '0 0 120 60';
  return header + `<svg xmlns="http://www.w3.org/2000/svg"
    width="${width}" height="${height}" viewBox="${viewBox}">
    <path fill="#f36f59" fill-rule="evenodd" d="${path}"/></svg>`;
}
const cases = [
  ['tight contain', false, 'contain'],
  ['tight cover', false, 'cover'],
  ['padded contain', true, 'contain'],
  ['padded cover', true, 'cover']
].map(([label, padded, fit]) => ({
  label, fit,
  image: 'data:image/svg+xml;utf8,' + encodeURIComponent(artwork(padded))
}));
Promise.all(cases.map(item => new Promise((resolve, reject) => {
  const image = new Image();
  image.onload = () => resolve({
    label: item.label,
    width: image.naturalWidth,
    height: image.naturalHeight
  });
  image.onerror = () => reject(new Error(item.label + ' failed to load'));
  image.src = item.image;
}))).then(loaded => {
  cytoscape({
    container: document.getElementById('cy'),
    elements: cases.map((item, index) => ({
      data: { id: 'n' + index, ...item },
      position: { x: 110 + index * 260, y: 95 }
    })),
    style: [{ selector: 'node', style: {
      width: 120, height: 80, padding: 0, shape: 'rectangle',
      'background-color': '#f1f3f5',
      'background-image': 'data(image)',
      'background-fit': node => node.data('fit'),
      'background-width': 'auto', 'background-height': 'auto',
      'background-width-relative-to': 'inner',
      'background-height-relative-to': 'inner',
      'background-position-x': '50%', 'background-position-y': '50%',
      'background-repeat': 'no-repeat', 'background-clip': 'node',
      'border-width': 1, 'border-color': '#222',
      label: 'data(label)', 'text-valign': 'bottom',
      'text-halign': 'center', 'text-margin-y': 10, 'font-size': 12
    }}],
    layout: { name: 'preset', fit: false },
    zoom: 1, pan: { x: 0, y: 0 },
    userZoomingEnabled: false, userPanningEnabled: false,
    boxSelectionEnabled: false
  });
  document.getElementById('status').textContent =
    'Cytoscape ' + cytoscape.version + '\n' +
    JSON.stringify(loaded, null, 2);
}).catch(error => {
  document.getElementById('status').textContent = error.message;
});
</script>
</html>

स्थिति ब्लॉक ग्राफ़ शुरू होने से पहले प्रीलोड किए चित्रों के आयाम बताता है। naturalWidth चित्र की अंतर्निहित, घनत्व-संशोधित चौड़ाई CSS पिक्सेल में पढ़ता है, जैसा MDN बताता है। इस परीक्षण में कम मार्जिन वाले चित्रों ने 120 × 60 और अधिक खाली जगह वाले चित्रों ने 200 × 140 बताया। ये चित्र के आयाम हैं, मूँगा रंग के पाथ की माप नहीं।

समान नोड आकार पर बदलाव तुलना करें

चारों मॉडल नोड 120 × 80 हैं और नोड padding शून्य है। हमने Chrome में मूल परीक्षण को ग्राफ़ ज़ूम 1 और 1.5 पर जाँचा। नोड शैली 120 × 80 रही; 1.5 पर उसके बताए रेंडर आयाम 180 × 120 हुए। यह उस ब्राउज़र में स्थिर तुलना थी, संगतता या ज़ूम प्रदर्शन बेंचमार्क नहीं।

कम मार्जिन वाले स्रोत का चित्र अनुपात 2:1 है, जबकि नोड 1.5:1 है। पूरे 120 × 60 चित्र को 120 × 80 में फ़िट करने पर लंबवत जगह बचती है। नोड को cover करने पर क्लिपिंग से पहले चित्र 160 × 80 होता है, इसलिए उसके क्षैतिज सिरे मुख्य भाग से बाहर जाते हैं।

अधिक खाली जगह वाले स्रोत के उपलब्ध चित्र आयत में हर ओर 40 अतिरिक्त इकाइयाँ हैं। contain फ़िट में स्केल 120/200 के बजाय 80/140 से सीमित होता है। इसलिए वही 108-इकाई चौड़ा बैज लगभग 62 मॉडल इकाइयाँ घेरता है। यह घोषित आयामों की गणना है, स्क्रीनशॉट का पिक्सेल माप नहीं।

स्रोत सीमा और फ़िट

कलाकृति की सीमा जाँचने के बाद फ़िट चुनें

पूरा बैज महत्वपूर्ण हो तो कम मार्जिन वाले स्रोत और contain से शुरू करें। जो स्ट्रोक या प्रभाव दिखना चाहिए उसके लिए स्रोत में पर्याप्त मार्जिन रखें। viewport बहुत कसने से वैध कलाकृति कट सकती है; यह हर मार्जिन हटाने का निर्देश नहीं है।

डिज़ाइन में किनारे कटना स्वीकार्य हो तो cover लें। हमारे उदाहरण में वह नुकीले सिरे छिपाता है, इसलिए अगर वे पहचान बनाते हैं तो यह खराब चुनाव है। चौड़ा नोड फ़िट अनुपात बदलकर सिरे दिखा सकता है, लेकिन ग्राफ़ लेआउट भी बदलता है। दोनों आयाम अनुपात में बढ़ाने से वही कटाव बना रहता है। तय करें कि कौन-सी बाधा बदलनी है।

इस तुलना के लिए background-width और background-height को auto रखें। स्पष्ट मान फ़िट में इस्तेमाल चित्र आयामों को ओवरराइड कर सकते हैं। नोड padding अलग इनपुट है; लाइब्रेरी बताती है कि बैकग्राउंड आकार में वह शामिल है या अंदरूनी भाग लिया जाता है। नियंत्रण जोड़ने से पहले background-image संदर्भ देखें। हमारा शून्य-padding परीक्षण पहले स्रोत की खाली जगह अलग करता है।

SVG-स्तर पर meet, slice और संरेखण के निर्णय के लिए preserveAspectRatio गाइड देखें। SVG का आंतरिक फ़िट और Cytoscape का बैकग्राउंड फ़िट बदलना अलग ऑपरेशन हैं।

क्लिपिंग से पहले लोडिंग का निदान करें

स्थिति में लोड विफल हो तो contain को cover करना अगला चरण नहीं है। चित्र संसाधन अकेले खोलें, URL और घोषित आयाम जाँचें, फिर उसे ऊपर के स्वयंपूर्ण केवल-पाथ बैज तक घटाएँ। डेटा URI के लिए कच्चा मार्कअप या बिना एस्केप रंग मान जोड़ने के बजाय पूरी SVG स्ट्रिंग एन्कोड करें।

चित्र की तरह इस्तेमाल SVG की सीमाएँ दस्तावेज़ के रूप में खुले SVG से अलग हैं। MDN की SVG को चित्र की तरह इस्तेमाल करने की गाइड चित्र संदर्भ में स्क्रिप्ट और बाहरी संसाधनों की सीमाएँ बताती है। बाहरी स्टाइलशीट या फ़ॉन्ट पर निर्भर कलाकृति फ़ाइल को अलग डिलीवरी परीक्षण चाहिए। यह उदाहरण उन निर्भरताओं से बचता है और ग्राफ़ लेबल SVG के बाहर रखता है।

चित्र लोड हो तो स्पष्ट चौड़ी आकृति से फ़िट और नोड क्लिपिंग जाँचें। फिर ऐप के समर्थित नोड आकारों और ब्राउज़र परिवेश में अपनी वास्तविक कलाकृति जाँचें। Cytoscape दस्तावेज़ ब्राउज़र-विशिष्ट SVG पहलू बताते हैं; Chrome का यह अवलोकन Firefox या हर दूसरे इंजन के लिए उनका समाधान नहीं है।

लेबल और संपादन योग्य कलाकृति अलग रखें

उदाहरण ग्राफ़ लेबल के लिए label: 'data(label)' लेता है और उसमें SVG टेक्स्ट नहीं है। बैज दोबारा बनाए बिना लेबल का पाठ बदल सकते हैं। SVG पाथ स्रोत मास्टर में रहता है, जबकि ग्राफ़ नोड की पहचान, जगह और संबंध संभालता है।

जाँचा गया परीक्षण Canvas सतहों पर ड्रॉ करता था। वहाँ SVG बैकग्राउंड दिखने से उसके भीतरी पाथ अलग संपादन योग्य ग्राफ़ एलिमेंट नहीं बनते। खुला भाग, बाहरी आकृति या रंग बदलने के लिए मास्टर रखें। ग्राफ़ निर्यात अलग प्रक्रिया है जिसके लिए अपना निर्यातक और डिलीवरी परीक्षण चाहिए; यह गाइड निर्यातित ग्राफ़ में बैज के संपादन योग्य पाथ बचने का वादा नहीं करती। Graphviz कलाकृति गाइड दूसरे आरेख रेंडरर के चित्र-संदर्भ हस्तांतरण को बताती है।

आपका बैज केवल PNG या JPG हो तो उस स्रोत को वेक्टर कलाकृति में बदलें, फिर SVG सीमा तय करने से पहले बाहरी आकृति, खुला भाग और छोटे विवरण जाँचें। PerfectVector संपादन योग्य स्रोत ज्यामिति पाने में मदद कर सकता है। बैकग्राउंड शैली, नोड लेबल और ग्राफ़ निर्यात अलग चरण रहते हैं। मौजूदा उपयुक्त SVG सीधे फ़िट जाँच में जा सकता है।

अक्सर पूछे जाने वाले प्रश्न

cover फ़िट के बाद भी SVG नोड चित्र छोटा क्यों है? स्रोत चित्र में पाथ के आसपास viewport की बहुत खाली जगह हो सकती है। ग्राफ़ लेआउट बदलने से पहले उसी नोड आयाम में कम सीमा वाली प्रति तुलना करें।

अपने बैज के लिए contain लें या cover? पूरा बैज ज़रूरी हो तो contain चुनें। दिखा किनारा कटना डिज़ाइन में स्वीकार्य हो तभी cover चुनें और अपने स्रोत व नोड आकृति से जाँचें।

क्या SVG नोड बैकग्राउंड संपादन योग्य ग्राफ़ पाथ बनाता है? जाँचा गया Canvas उदाहरण SVG को चित्र पेंट की तरह लेता है। पाथ संपादन के लिए कलाकृति मास्टर रखें; इस उदाहरण में भीतरी रूपरेखाएँ अलग ग्राफ़ नोड या एज नहीं हैं।

क्या SVG में लेबल रख सकते हैं? यह उदाहरण लेबल को ग्राफ़ डेटा में रखता है और केवल-पाथ कलाकृति लेता है। SVG टेक्स्ट, फ़ॉन्ट और चित्र-संदर्भ निर्भरताओं की अपनी ब्राउज़र व डिलीवरी जाँच चाहिए।

स्रोत

1. Cytoscape.js — बैकग्राउंड चित्र — चित्र URL शैली, फ़िट, आकार ओवरराइड, padding संदर्भ और SVG पहलू।
2. Cytoscape.js — रिलीज़ v3.34.3 — मूल परीक्षण में इस्तेमाल निश्चित रिलीज़।
3. Cytoscape.js — v3.34.3 ब्राउज़र बंडल — ब्राउज़र परीक्षण के लिए स्थानीय रूप से सर्व किया आधिकारिक टैग वाला कार्यान्वयन।
4. MDN — viewBox — स्रोत निर्देशांक आयत और viewport मैपिंग।
5. MDN — encodeURIComponent — SVG डेटा-URI घटक को एस्केप करना।
6. MDN — naturalWidth — लोड चित्र के आयाम, जो पाथ सीमा से अलग हैं।
7. MDN — चित्र के रूप में SVG — चित्र संदर्भ की सीमाएँ और निर्भरता जाँच।

बैज रास्टर से शुरू हो तो संपादन योग्य SVG मास्टर बनाएँ, रूपरेखाएँ और स्रोत सीमा जाँचें, फिर अपने नोड लेआउट में contain और cover तुलना करें।