是否可以將SVG對象的自定義屬性設置爲數字而不是字符串？

我正在爲SVG-G元素（SVG組對象）分配人工屬性。我將該組的內容與SVG轉換一起移動，並將這些組的x/y座標及其寬度/高度存儲在這些屬性中。是否可以將SVG對象的自定義屬性設置爲數字而不是字符串？

我使用的是D3 Javascript庫和呼叫：

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

導致下列對象：

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

這是確定的，唯一婷困擾着我的事實，該屬性值以字符串形式存儲。如果我想用它們進行一些計算，我不得不施放。

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

有沒有辦法將這些值直接存儲爲整數/雙？

來源

2013-06-13 karlitos

D3中的正常方法是將數據列表綁定到節點。請參閱data portion of the Selection API。 D3將它放在它創建/修改的DOM節點的__data__屬性中。內部D3拉出該屬性並將其作爲參數傳遞給各種函數，但您可以直接自行訪問它。

也可以通過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

來源

2013-06-13 14:20:10 explunit

哦！非常感謝您的好解釋。我必須詳細瞭解D3中元素的邊界數據/屬性。從來沒有想過爲了我的目的使用這個功能。 – karlitos

您可以覆蓋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經驗，所以我不知道如果是這樣的正確的原型附加到;我只是從看到源頭中挑選出來的。 :)

來源

2013-06-13 07:17:25

雖然這可能工作，我認爲D3有一個更清潔的內置方法。看到我的答案。 – explunit

是否可以將SVG對象的自定義屬性設置爲數字而不是字符串？

回答

相關問題