score:1
Accepted answer
The issues are
- You get the raw DOM nodes, and not the RaphaelJS wrapped objects (because you use
document.getElementsByTagName
) - You set
data
but try to access it throughattr
. - In the fiddle, the
newSet
is not correctly built becuase you use thei
variable which goes from 1 to 5.. to calculate the index you need to account for both of the loop counter.
So the changes made are
When populating the newSet
var index = (i*5) + y;
newSet[index] = paper.set();
When clearing and populating the chart use newSet
newSet[x].forEach(function(item){
if (item.type=='text')
attr=item;
});
to get the text node.
Working demo at Have a look at http://jsfiddle.net/G94sQ/22/
You can ofcourse use id
to simplify the code
To assign an id
just use text.id = 'your-id'
When creating the newSet
text.id = 'weight-'+weight;
and when clearing/populating
attr = paper.getById('weight-'+obj.weight);
Working demo at http://jsfiddle.net/G94sQ/23/
(additionally: you are using jquery 1.11 in which the .toggle
method just shows/hide the element and does not rotate the click
functions as earlier versions. So I changed your code to 1.4.2 as a quick fix..)
Source: stackoverflow.com
Related Query
- Adding additional data to Raphael.js text element
- adding input text box on clicking the data labels d3.js
- Adding additional data points to a chart
- Adding Multiple Rect per data element in d3
- Adding a new path when the updated data has additional sections
- d3 Add text element if value exists in data
- Match SVG text element id with data id using D3
- d3 foreignObjects, adding checkbox and text from data
- Adding sub element based on data using D3
- Adding text to a newly added element
- D3 - How can I show/hide a text element when hovering a circle element created from different attributes of the same data entry?
- Conditionally render a text element if a certain property is present in the data
- In D3, Bar graph's text labels are not updated after the inclusion of additional data
- Adding an <a> tag before the primary data element in the enter() section of a selection
- How to center text in a rect element in d3?
- d3 adding data attribute conditionally
- read width of d3 text element
- make sure d3 data element matches id?
- Get width of d3.js SVG text element after it's created
- D3.js - JSON data array is binding the same array element to everything
- how to assign unique id to SVG text element in d3 javascript
- Fit Text into SVG Element (Using D3/JS)
- Adding a title attribute to svg:g element in D3.js
- Adding text to the center of a D3 Donut Graph
- adding padding to svg g element
- How can I get "call" to execute for each data element in D3?
- D3.js: Adding class whose name is based on data
- d3 - Change text label when data updates
- how to access data of a d3 SVG Element
- How to put text data with d3.js
More Query from same tag
- reading d3 data in from a file rather than hard coding it into a programme
- D3 - Disable/Reenable mouseover on certain layers
- SVG text alignment issues with a curved textpath
- d3 treemap make each rectangle size represent it's value
- Far side of the Globe
- d3 change function of button with checkbox
- Cannot display tooltip in bubble chart with d3.js
- How do I reset an animation using the d3.js and waypoints.js libraries?
- Using d3, how can I create a histogram or bar plot where the last bar is the count of all values greater than some number?
- D3.js: How to highlight nodes in Dendogram with particular color?
- Redrawing SVG on resize
- Image is cropped when exiting the svg
- D3, Angular component passing in variable
- How to extract top 10 data in d3.js?
- Exclude an element from a selection
- Reference data of d3 element to parent node data
- D3 slider with ordinal values gets stuck on tick 8
- Sum an entire (changing) Object using d3
- On click of bar chart rectangle, update of other bar charts fails
- Colour regions by order they appear in array
- In d3, how do I include text and a background box as I roll over my line chart?
- D3 transform scale and translate
- Dynamically add button d3.js
- D3 : non continuous line chart with null values inside an object
- D3 Adding arrowheads to edges, directed graph
- creating groups for decimal values using crossfilter
- D3.js:Tracking user interaction with svg in GA
- Drawing data 1 by 1 D3 js
- recursively find all children in tree
- How to create a dashed line with arrows on each dash in d3?