AnsweredAssumed Answered

Replacing FeatureLayer graphic with a D3.js object

Question asked by jay.gregory on Sep 29, 2017
Latest reply on Oct 5, 2017 by TSolow-esristaff

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;
            }


        });

Outcomes