Is there a way to unselect a selected element with d3.js?

[Conor]

I have a d3 graph (collapsable indented tree) and I'm saving it to a canvas element. This is working fine.

However after I save the svg to the canvas and interact with the three the graph gets rendered in really strange ways (i.e links and text disapearring). This strange behaviour onkly happens after I save the graph to canvas. It works fine if I do not save it to canvas.

I think this is because I used d3 to select all svg on my page in order to get the svg xml. Is there a way to do an unselect operation on a selection or is there a better way of getting the svg xml?

Here is the relevant code :

d3.selectAll("#view-on-canvas").on(

                "click",
                function(d) {
                   var graphSVG = d3.selectAll('svg').node()  //I think this line is the problem
                   var ctx;
                   var serializer = new XMLSerializer();
                   var thumbnailImage = new Image();
                   var xmlString = serializer.serializeToString(graphSVG);
                   var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString);
                        thumbnailImage.onload = function() {
                        var thumbnailCanvas = $("#canvas")[0];
                        ctx = thumbnailCanvas.getContext("2d");
                        ctx.drawSvg(text, 0, 0);
                    }
                    thumbnailImage.src = $("canvas")[0].toDataURL("image/png");
                });

[Christophe Viau]

Just give an id to your target svg or to its container for easier selection.
d3.selectAll('svg#target').node()

or you can narrow down your selection using css, i.e., for selecting svg by the presence of a specific attribute
http://reference.sitepoint.com/css/attributeselector

or using selection.filter
https://github.com/mbostock/d3/wiki/Selections#wiki-filter

or even by playing with the selection set array
d3.selectAll(d3.selectAll('rect')[0].slice(0, 20))

which I only mention for the sake of completeness, as I don't recommend it since you can do the same with filter
d3.selectAll('rect').filter(function(d, i){ return i<20; })

But if you are able to filter out the svg you don't want, it will probably be easier anyway to select just the one you want...

Chris

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Christophe Viau]

Do you have an error in the console? Do you have a canvas element in the page or an element with a "canvas" id?
Chris

On 7/2/13 7:25 AM, Conor wrote:

Thanks for your response Chris.

After some debugging I found the line :

thumbnailImage.src = $("canvas")[0].toDataURL("image/png");

was causing the issue. The graph renders and acts as expected if this line is commented  out. I'm unsure why. I will post back here if I find the solution.

[Conor]

There is no console error. I deleted the post as its actually the line :
      ctx.drawSvg(text, 0, 0);
thats causing the irregular behavior. I'm guessing the additional svg on the page is being picked up by d3 but I do not know it well enough to know for certain.

Here is my html for the canvas element :     <canvas id="canvas" width="1000px" height="600px"></canvas>