raphael

I am using raphael.js to draw a simple SVG line graph like this: When the user hovers the graph, id like to display a popover pointing to the line at the X position of the cursor, and at the Y position where the line is for that X position like so: I need to take the path and find the Y coordinate for a given X coordinate. Based on @Duopixel's D3 solution, I wrote the following function for my own use, in pure javascript using DOM API: function findY(path, x) { var pathLength = path.getTotalLength() var start = 0 var end = pathLength var target = (start + end) / 2 // Ensure that x is within

I'm using RaphaelJS for visually representing some data. The underlying technology is SVG so obviously things don't always work that well in IE, but the library does a relatively ok job of still rendering something useful, although it often tends to look pretty poor. In any case, I can't seem to get around this basic issue. Text is rendered fine in Chrome or FireFox, but everything renders as bold and italic in IE8. To see my issue in action, go to the RaphaelJS playground and use the following code paper.text(100, 100, "this is the text") Here is the result in Chrome and IE. Is there any

I read in the documentation raphaeljs description of Set.forEach , and can't understand how it works. Please can anyone give me an example of usage. Here you have a working example: http://jsfiddle.net/9X6rM/ And this is the important part of It: set.forEach(function(e){ e.attr({fill:'#000'}) }) Its a little bit tricky at first, but its pretty handy when you get it. You need to pass to the forEach() method the function that you want to execute on each element, and this function need to have, like an argument, a variable name to bind to the element. So in this case e is the rectangle that is

I want to add text to a element in raphael js, I have added text with r.text(30, 20, "ellipse").attr({fill: color}); But how to add this text to ec = r.ellipse(190, 100, 30, 20); regards Raphael does not have child/parent relationship between elements, so you will set same position for them e.g. ec = paper.ellipse(190, 100, 30, 20); paper.text(190, 100, "ellipse").attr({fill: '#ff0000'}); So if you want a ellipse with text, create your own JavaScript object which handles positioning of both. or alternate way is to group elements via set e.g. var eltext = paper.set(); el = paper.ellipse(0, 0,

i was using raphaeljs , and i want to show html(not only text) in svg, so i use this code : var r = Raphael("holder", 200, 300); var t = r.text(10, 10, "ssdwqdwq"); t.node.innerHTML='dddd' but i cant change the svg's content , so i console it in firebug , console.log(t.node) it show this : <text x="10" y="13.5" text-anchor="middle" style="font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000"> so how to change the text using javscript on svg thanks SVG nodes don't have a innerHTML property (they're not HTML). Use textContent instead: t.node.textContent='dddd' if the code for the

Is it possible to use D3 and Raphael together so that visualizations are produced by D3 (using D3's API to produce svg output) and correctly visualized in IE by Raphael ? I appreciate any example/sample code. Yes you can. We've improved r2d3 from a compatibility project to an IE fallback for D3. This was achieved by having D3 wrap Raphael elements which we extended with methods such as setAttribute. This enables D3 to work with Raphael elements like they were DOM nodes. The project still needs some work to iron out issues with things like groups, but I encourage you to check it out to see if