javascript - Is it possible to set custom attributes of SVG objects as number and not as string? - Stack Overflow

admin管理员组

文章数量:1277888

I am assigning artificial attributes to a SVG-G element (SVG group object). I move the group with its content with SVG transformations and I store the x/y coordinates of the group and its width/height in those attributes.

I am using the D3 Javascript library and the call :

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

results in following object :

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

This is Ok, the only ting bothering me is the fact, that the attribute values are stored as string. If I want to use them for some putation, I am forced to cast.

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

Is there a way to store those values directly as integer/double ?

I am assigning artificial attributes to a SVG-G element (SVG group object). I move the group with its content with SVG transformations and I store the x/y coordinates of the group and its width/height in those attributes.

I am using the D3 Javascript library and the call :

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

results in following object :

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

This is Ok, the only ting bothering me is the fact, that the attribute values are stored as string. If I want to use them for some putation, I am forced to cast.

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

Is there a way to store those values directly as integer/double ?

• javascript
• svg
• attributes
• d3.js

Share Improve this question Follow asked Jun 13, 2013 at 7:11 karlitoskarlitos 1,65644 gold badges2828 silver badges6464 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The normal approach in D3 is to have lists of data that are bound to nodes. See the data portion of the Selection API. D3 puts this in the __data__ property of the DOM nodes that it creates/modifies. Internally D3 pulls out that property and passes it as a parameter to various functions, but you can certainly access it yourself directly.

It's also possible to associate an arbitrary data structure to a single node via the Datum method.

Without the rest of the context it's hard to say, but below is a modified version of what I think you are trying to do:

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

Both console.log statements output:

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

You could override d3's attr function to sniff out numbers and do the parseInt for you. That might present patibility problems later, so maybe it would be better to create a new attrInt function, for example:

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

Disclaimer: I don't have experience with d3 so I'm not sure if that is the correct prototype to attach to; I just picked that up from glancing at the source. :)

本文标签： javascriptIs it possible to set custom attributes of SVG objects as number and not as stringStack Overflow