क्या एसवीजी ऑब्जेक्ट्स के कस्टम गुणों को संख्या के रूप में सेट करना संभव है और स्ट्रिंग के रूप में नहीं?

Question

मैं एक एसवीजी-जी तत्व (एसवीजी समूह वस्तु) में कृत्रिम विशेषताओं को आवंटित कर रहा हूं। मैं समूह को एसवीजी ट्रांसफॉर्मेशन के साथ अपनी सामग्री के साथ ले जाता हूं और मैं समूह के एक्स/वाई निर्देशांक और उन गुणों में इसकी चौड़ाई/ऊंचाई को संग्रहीत करता हूं। निम्नलिखित वस्तु में

embeddedElemContainer = nodeBoxContainer.append('svg:g') 
    .attr('x', x) 
    .attr('y', y) 
    .attr('width', width) 
    .attr('height', height) 

परिणाम::

मैं डी 3 जावास्क्रिप्ट पुस्तकालय और कॉल उपयोग कर रहा हूँ,

<g transform="translate(13.585786437626904,31.585786437626904)" x="13.585786437626904" y="31.585786437626904" width="43.00000000000001" height="0"></g> 

यह ठीक है, केवल टिंग मुझे परेशान कर रहा तथ्य यह है कि विशेषता मान स्ट्रिंग के रूप में संग्रहीत हैं। अगर मैं उन्हें कुछ गणना के लिए उपयोग करना चाहता हूं, तो मुझे कास्ट करने के लिए मजबूर होना पड़ता है।

parseInt(@embeddedElemContainer.attr('x')) 

क्या उन मानों को सीधे पूर्णांक/डबल के रूप में स्टोर करने का कोई तरीका है?

Answer 1

डी 3 में सामान्य दृष्टिकोण डेटा की सूचियां हैं जो नोड्स से बंधे हैं। data portion of the Selection API देखें। डी 3 इसे __data__ डीओएम नोड्स की संपत्ति में रखता है जो इसे बनाता/संशोधित करता है। आंतरिक रूप से डी 3 उस संपत्ति को खींचता है और इसे विभिन्न कार्यों के पैरामीटर के रूप में पास करता है, लेकिन आप निश्चित रूप से इसे सीधे अपने आप तक पहुंच सकते हैं।

Datum method के माध्यम से एक मनमानी डेटा संरचना एकल नोड को जोड़ना भी संभव है।

var vis = d3.select("body").append("svg").attr("width", 400).attr("height", 300); 

var groupData = {x: 100, y:100, height: 50, width: 50, theanswer : 42, thecolor: "blue", somedouble: 45.1651654 }; 

var embeddedElemContainer = vis.append('svg:g') 
    .datum(groupData) 
    .attr('id', 'mygroup') 
    .attr('x', function(d) { return d.x; }) 
    .attr('y', function(d) { return d.y; }) 
    .attr('height', function(d) { return d.height; }) 
    .attr('width', function(d) { return d.width; }) 

// the regular DOM way: 
console.log(document.getElementById('mygroup').__data__) 

// the D3 way: 
console.log(d3.select('#mygroup').datum()); 

दोनों console.log बयान उत्पादन:

height: 50 
somedouble: 45.1651654 
theanswer: 42 
thecolor: "blue" 
width: 50 
x: 100 
y: 100 

Answer 2

आप संख्याओं को छीनने के लिए d3 के attr फ़ंक्शन को ओवरराइड कर सकते हैं और parseInt आपके लिए कर सकते हैं। यही कारण है कि संगतता समस्या बाद में पेश हो सकता है, तो शायद यह बेहतर हो उदाहरण के लिए, एक नया attrInt समारोह बनाने के लिए होगा:

d3.selection.prototype.attrInt = function(name, value) { 
    if(arguments.length == 1) { 
    return parseInt(this.attr(name)); 
    } else { 
    return this.attr(name, value); 
    } 
}; 

अस्वीकरण: मैं d3 के साथ अनुभव की जरूरत नहीं है तो मैं यकीन नहीं है कि अगर है संलग्न करने के लिए सही प्रोटोटाइप; मैंने बस उस स्रोत पर चमक से उठाया। :)