CODEWITHSUNDEEP
javascriptjqueryd3.jsraphael
Jef
Jef

Reputation: 811

Adding additional data to Raphael.js text element

I am working on some sort of graph in Raphael.js, I made it first with D3 (which can be found here), but that didn't work as well in Internet Explorer. I've heard Raphael.js does it much better in IE.

So now I am trying to convert my D3 code to Raphael, I made some progress, but I have some problems trying to add additional data or an id to a text element, which I can use to modify the text of a specific element. In D3 I've used .attr("weight", weight) on a text element, and this works fine. But in Raphael, I can't get it to work.

I've tried giving the text an ID like this:

var text = paper.text((y * 50) + 20, (i * 50) + 15, weight).attr({
        fill: '#000'
    });
    text.attr({
        "font-size": 16,
            "font-family": "Arial, Helvetica, sans-serif"
    });

    text.id = weight;

But still no luck in logging that ID. If it is not clear why I need this ID, check the before mentioned jsFiddle I made with D3, I need to get a specific element to change its text.

var grossRisks = [{
"weight": "1",
    "number": "5"
 }, {
 "weight": "4",
    "number": "6"
 }];

function populateChart(riskArray) {
var element = document.getElementsByTagName("text"),
    attr;
var loops = riskArray.length;
for (var i = 0; i < loops; i++) {
    var obj = riskArray[i];

    for (var x = 0; x < element.length; x++) {
        attr = element[x];
        if (/^text/.test(attr.nodeName)) {
            console.log(
                "Weight: " + attr.getAttribute("weight"));
            if (attr.getAttribute("weight") == obj.weight) {
                attr.textContent = obj.number;
            }
        }
    }
}

I have tried multiple things like making a new set and adding data to that set, but I don't know where to go from that point, like how do I change the text of a set with a specific ID?

newSet[i] = paper.set();
    newSet[i].push(rect, text);

    newSet[i].attr({
        cursor: 'pointer'
    }).data('weight', weight);

    newSet[i].click(function () {
         console.log(this.id("weight"));
    });

The not working code of Raphael can be found in this jsFiddle.

Upvotes: 1

Views: 505

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

The issues are

  1. You get the raw DOM nodes, and not the RaphaelJS wrapped objects (because you use document.getElementsByTagName)
  2. You set data but try to access it through attr.
  3. In the fiddle, the newSet is not correctly built becuase you use the i 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..)

Upvotes: 1

Related Questions