Hi,

I have a dynamically created Opportunity where i assign values according to some formula:
 

Opportunity opp = new Opportunity(Name='SomeName', Amount=2000, Probability=20);

Then i convert it to a JSON String:

return JSON.serialize(opp);

My problem here is: The JSON String only contains the Values used/assigned by me. That would be Name, Probability, Amount.

Result: 

{"Name":"SomeName", "Probability":"20", "Amount":"2000"}

But I need it to also contain ExpectedRevenue, which is calculated by Probability*Amount. It is a read-only field, so i cannot set it in the code.

Desired Result:

{"Name":"SomeName", "Probability":"20", "Amount":"2000", "ExpectedRevenue":"400"}

I have a lightning component where i use javascript to add/remove svg components based on user input.

After removing the svg components the second time, an exception is thrown: "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

The reason for this is that the parentNode/parentElement property of the tag is null, but the tag is in the children-list of the parentnode.

I am wondering if i made a mistake or if this is a framework-bug.
The following simple example reproduces the error. The first button inserts the svg tag. The second button deletes all child-group-tags and inserts a new one.

When deleting a tag a second time, the error is thrown.

Does anyone know how to fix this?

Component:

<aura:component>
    <div><ui:button press="{!c.createSvg}" label="Create Svg Tag"></ui:button></div>
    <div><ui:button press="{!c.test}" label="Press 3x to create bug"></ui:button></div>
    <div id="funnel">Div for SVG</div>
</aura:component>

({
	test : function(component, event, helper) {
	    var parent = document.getElementById("parent");
	    
	    helper.removeChildGroups(parent);
	    helper.addChildGroups(parent);
	},
	
	createSvg : function(component, event, helper){
	    //add svg tag
        var container = document.getElementById("funnel");
        var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
        var baseGroup = document.createElementNS("http://www.w3.org/2000/svg", 'g');
        baseGroup.id = "parent";
        
        svg.appendChild(baseGroup);
        container.appendChild(svg);
    },
})

({
	removeChildGroups : function(parentTag) {
		var i;
		//iterate over children
		for(i = 0; i < parentTag.children.length; i++){
		    var child = parentTag.children[i];
		    //if g tag, remove
		    if(child.tagName == "g"){
		        if(child.parentElement == null && child.parentNode == null){
		            console.log("Here is the problem, child is in parent.children, but child.parent is null:");
                    console.log(child);
		        }
		        parentTag.removeChild(child);
		    }
		}
	},
	
	addChildGroups : function(parentTag) {
	    var groupTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); //Create a path in SVG's namespace
        var positionMarker = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a path in SVG's namespace
        positionMarker.setAttribute("cx", Math.random()*50+50);
        positionMarker.setAttribute("cy", Math.random()*50+50);
        positionMarker.setAttribute("r", 10);
        
        groupTag.appendChild(positionMarker);
        parentTag.appendChild(groupTag);
        
	},
})

Hello,

I have a lightning component containing a <div id="myChart"/> tag.

The task is to render a custom graph into that div tag. For that i need to use a charting library (d3funnel.js, based on d3.js) which puts <svg> into the div tag. Then i need to add my own svg elements (circle, path...) into that <svg> tree.

what i did: i inserted my library chart and my custom svg elements in doneRendering() event, because i need correct results from element.getBoundingClientRect(). and i only get the boundingrect if the dom is rendered.

the problem: the library chart renders fine. but when i try to insert my custom svg tags, the chart gets repainted instantly, somehow. then, only the chart is present, but my custom tags are gone.

The documentation says that i need to modify the dom in the custom renderer. 
i cant use render() and afterRender(), because the chart gets inserted in doneRendering.

When i try to use rerender() to insert , the function doesnt get called. I changed an attributes, fired events from the client controller, changed labels from ui elements, but no effect.

what am i doing wrong?

code snippets:

doneRendering : function(component, event, helper){
        //Polling: We need to wait for scripts and serverdata to be loaded
        //before we can draw the chart. so we periodically check if data is here
        var timesToCheck = 50;
        var poll = function (helper) {
            setTimeout(function () {
                timesToCheck--;
                //everything is loaded?
                if (helper.isScriptsLoaded() && helper.isSectionsLoaded() && helper.isDataPointsLoaded()) {
                    helper.render();
                } else if (timesToCheck > 0) {
                    poll(helper);
                } else {
                    window.alert("Unable to load data from server!");
                }
            }, 100);
        };

(helper.render first draws the chart using the js library, then immediately draws my custom svg elements, then finishes.)

renderer:

({
    render : function(cmp, helper) {
    	var ret = this.superRender();
        window.alert("I get called");
    	return ret;
	},
    rerender : function(cmp, helper){
    	this.superRerender();
        window.alert("I do not get called :(");
        helper.paintCustomSvg();
	},
})

clientcontroller:

causeRerender : function(cmp, event, helper){
        var button = cmp.find("refreshElement");
        button.set("v.label","Hello");
        cmp.set("v.refresh", "123"); //change some attribute
    }

component:

<aura:component controller="SalesFunnelController">
    <ltng:require styles="{!$Resource.bootstrap}"/>
    <ltng:require scripts="{!$Resource.d3library}"/>
    <ltng:require scripts="{!$Resource.d3funnel}"
    afterScriptsLoaded="{!c.afterScriptsLoaded}" />
    
    <aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
    
    <ui:button aura:id="refreshElement" label="refresh button hidden" press="{!c.causeRerender}"/>
    <aura:attribute name="refresh" type="String" description="some attribute" />
  
    <div id="funnel">LOADING FUNNEL DATA...</div>
</aura:component>

I have a lightning component where i use javascript to add/remove svg components based on user input.

After removing the svg components the second time, an exception is thrown: "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

The reason for this is that the parentNode/parentElement property of the tag is null, but the tag is in the children-list of the parentnode.

I am wondering if i made a mistake or if this is a framework-bug.
The following simple example reproduces the error. The first button inserts the svg tag. The second button deletes all child-group-tags and inserts a new one.

When deleting a tag a second time, the error is thrown.

Does anyone know how to fix this?

Component:

<aura:component>
    <div><ui:button press="{!c.createSvg}" label="Create Svg Tag"></ui:button></div>
    <div><ui:button press="{!c.test}" label="Press 3x to create bug"></ui:button></div>
    <div id="funnel">Div for SVG</div>
</aura:component>

({
	test : function(component, event, helper) {
	    var parent = document.getElementById("parent");
	    
	    helper.removeChildGroups(parent);
	    helper.addChildGroups(parent);
	},
	
	createSvg : function(component, event, helper){
	    //add svg tag
        var container = document.getElementById("funnel");
        var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
        var baseGroup = document.createElementNS("http://www.w3.org/2000/svg", 'g');
        baseGroup.id = "parent";
        
        svg.appendChild(baseGroup);
        container.appendChild(svg);
    },
})

({
	removeChildGroups : function(parentTag) {
		var i;
		//iterate over children
		for(i = 0; i < parentTag.children.length; i++){
		    var child = parentTag.children[i];
		    //if g tag, remove
		    if(child.tagName == "g"){
		        if(child.parentElement == null && child.parentNode == null){
		            console.log("Here is the problem, child is in parent.children, but child.parent is null:");
                    console.log(child);
		        }
		        parentTag.removeChild(child);
		    }
		}
	},
	
	addChildGroups : function(parentTag) {
	    var groupTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); //Create a path in SVG's namespace
        var positionMarker = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a path in SVG's namespace
        positionMarker.setAttribute("cx", Math.random()*50+50);
        positionMarker.setAttribute("cy", Math.random()*50+50);
        positionMarker.setAttribute("r", 10);
        
        groupTag.appendChild(positionMarker);
        parentTag.appendChild(groupTag);
        
	},
})

I have a lightning component where i use javascript to add/remove svg components based on user input.

After removing the svg components the second time, an exception is thrown: "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

The reason for this is that the parentNode/parentElement property of the tag is null, but the tag is in the children-list of the parentnode.

I am wondering if i made a mistake or if this is a framework-bug.
The following simple example reproduces the error. The first button inserts the svg tag. The second button deletes all child-group-tags and inserts a new one.

When deleting a tag a second time, the error is thrown.

Does anyone know how to fix this?

Component:

<aura:component>
    <div><ui:button press="{!c.createSvg}" label="Create Svg Tag"></ui:button></div>
    <div><ui:button press="{!c.test}" label="Press 3x to create bug"></ui:button></div>
    <div id="funnel">Div for SVG</div>
</aura:component>

({
	test : function(component, event, helper) {
	    var parent = document.getElementById("parent");
	    
	    helper.removeChildGroups(parent);
	    helper.addChildGroups(parent);
	},
	
	createSvg : function(component, event, helper){
	    //add svg tag
        var container = document.getElementById("funnel");
        var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
        var baseGroup = document.createElementNS("http://www.w3.org/2000/svg", 'g');
        baseGroup.id = "parent";
        
        svg.appendChild(baseGroup);
        container.appendChild(svg);
    },
})

({
	removeChildGroups : function(parentTag) {
		var i;
		//iterate over children
		for(i = 0; i < parentTag.children.length; i++){
		    var child = parentTag.children[i];
		    //if g tag, remove
		    if(child.tagName == "g"){
		        if(child.parentElement == null && child.parentNode == null){
		            console.log("Here is the problem, child is in parent.children, but child.parent is null:");
                    console.log(child);
		        }
		        parentTag.removeChild(child);
		    }
		}
	},
	
	addChildGroups : function(parentTag) {
	    var groupTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); //Create a path in SVG's namespace
        var positionMarker = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a path in SVG's namespace
        positionMarker.setAttribute("cx", Math.random()*50+50);
        positionMarker.setAttribute("cy", Math.random()*50+50);
        positionMarker.setAttribute("r", 10);
        
        groupTag.appendChild(positionMarker);
        parentTag.appendChild(groupTag);
        
	},
})