Replacing FeatureLayer graphic with a D3.js object

Question

Does anyone know how to replace graphics in a FeatureLayer with a D3.js object. I'm not interested in simply using an SVG path, but actually replacing the node in which the graphic is rendered with a node from a d3 object. I have little experience with d3, but from looking at Esri's documentation and digging into the console, I figure this shouldn't be too difficult. I've included a simple example I would like to get working, but ideally I would eventually use a more complicated d3 object, constructed from feature attributes. require(["esri/map", "esri/layers/FeatureLayer", "dojo/domReady!"], function(Map, FeatureLayer) { map = new Map("map", { basemap: "topo", center: [-97, 38], zoom: 5 }); var svg = createD3Circle(); console.log(svg); var featureLayer = new FeatureLayer("myfeatureserviceurl"); featureLayer.on('graphic-draw', function(graphic) { console.log(graphic); graphic.node = svg; console.log(graphic); //is there anything I can do here to replace each graphic with my svg object. //or possibly before the graphic even draws }); map.addLayer(featureLayer); featureLayer.on('load', function() { var sType = featureLayer.surfaceType; console.log(sType); }); function createD3Circle() { var svgContainer = d3.select("body").append("svg") .attr("width", 200) .attr("height", 200); var circle = svgContainer.append("circle") .attr("cx", 30) .attr("cy", 30) .attr("r", 20); return circle; } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ThomasSolow · Answer

Do you know, more generally, if there is a way to set a symbol to be a simple dom element in any of Esri's JS symbol classes? I don't think so, I believe the closest thing you can get here is an SVG. I'm not sure the best way to stringify an SVG, using innerHTML seems a little hacky. Using google, I came across this which might be useful: var xml = new XMLSerializer().serializeToString(mySVGElement);‍‍‍ You could probably create one XMLSerializer and perform all the "serializeToString" operations you need using it.

Jay_Gregory · Answer

Thanks!  This was very helpful.  The library I'm using ends up creating an svg dom node that I would like to use as the symbol.  Unfortunately referencing innerHTML of the dom node isn't sufficient, as not all svg properties are captured (although I have no idea why).  Do you know, more generally, if there is a way to set a symbol to be a simple dom element in any of Esri's JS symbol classes?

ThomasSolow · Answer

Here's another sample showing how you might do this with d3 and a simple renderer: JS Bin - Collaborative JavaScript Debugging