Czy można ustawić niestandardowe atrybuty obiektów SVG jako liczby, a nie jako ciąg?

Question

Przypisuję sztuczne atrybuty elementowi SVG-G (obiekt grupy SVG). Przenoszę grupę wraz z zawartością z transformacjami SVG i zapisuję współrzędne X/Y grupy oraz jej szerokość/wysokość w tych atrybutach.

używam biblioteki D3 Javascript oraz połączenia:

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

wyników w następujących obiektów:

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

To jest OK, tylko ting niepokoi mnie fakt, że atrybut wartości są przechowywane jako ciąg. Jeśli chcę je wykorzystać do pewnych obliczeń, jestem zmuszony do rzucenia.

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

Czy istnieje sposób na zapisanie tych wartości bezpośrednio jako liczbę całkowitą/podwójną?

Answer 1

Normalnym podejściem w D3 jest posiadanie list danych, które są powiązane z węzłami. Zobacz data portion of the Selection API. D3 umieszcza to we właściwości węzłów DOM, które tworzy/modyfikuje. Wewnętrznie D3 wyciąga tę właściwość i przekazuje ją jako parametr do różnych funkcji, ale z pewnością możesz uzyskać do niej dostęp bezpośrednio.

Możliwe jest również powiązanie dowolnej struktury danych z pojedynczym węzłem poprzez Datum method.

Bez reszty kontekście trudno powiedzieć, ale poniżej to zmodyfikowana wersja tego, co myślę, że starają się zrobić:

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()); 

Zarówno wyjściowy console.log oświadczenia:

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

Answer 2

Można zastąpić funkcjęd3, aby wyłowić numery i wykonać dla ciebie parseInt. To może stwarzać problemy ze zgodnością później, więc może lepiej byłoby, aby utworzyć nowy attrInt funkcji, na przykład:

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

Disclaimer: Nie mam doświadczenia z D3, więc nie jestem pewien, czy to jest poprawny prototyp do dołączenia; Właśnie to wybrałem, spoglądając na źródło. :)