How to use D3 library in Lightning...?

Hey guys,This is my first post please support me.In this post i am gonna show you how to use D3 charts in Lightning.

Lightning Component :

chartCmp.cmp

<aura:componentimplements="force:appHostable,flexipage:availableForAllPageTypes,

flexipage:availableForRecordHome,force:hasRecordId,

forceCommunity:availableForAllPageTypes,

force:lightningQuickAction"access="global">

<ltng:requirescripts="{!join(',',

$Resource.d3Library+'/jquery.min.js',

$Resource.d3Library+'/d3.v4.min.js')}"

afterScriptsLoaded="{!c.doinit}"/>

<lightning:cardtitle="D3Charts">

<lightning:layoutmultipleRows="true">

<divclass="slds-grid">

<divclass="slds-p-left--large">

<div>

<divclass="dollars">

</div>

<b>

<divclass="slds-p-left_x-large">

<divclass="slds-p-left_x-large">

Dollars

</div>

</div>

</b>

</div>

</div>

</div>

</lightning:layout>

</lightning:card>

</aura:component>

• chartCmpController.js

({

doinit:function(component,event,helper){

helper.Gaugechat(component,event,15000,10400,'dollars');

}

})

• chartCmpHelper. js

({

//UsedtoDisplayGaugechart

Gaugechat:function(configuration,event,maxval,resvalue,divid){

//thisistodisplaynumberformatefrom10400to10,400

functionformatNumber(num){

returnnum.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1,');

}

vardisplayvalue=formatNumber(resvalue);

if(divid=='dollars'){

displayvalue='$'+formatNumber(resvalue);

}

vartextcolor="black";

if(resvalue>maxval){

resvalue=formatNumber(maxval);

textcolor="red";

}

varvaluetoDisplay=formatNumber(maxval);

if(divid=='dollars'){

valuetoDisplay='$'+formatNumber(maxval);

}

letconfig={

size:400,

//arcwidth

arcInset:120,

arcWidth:70,

pointerWidth:12,

pointerOffset:0,

pointerHeadLengthPercent:0.9,

minValue:0,

maxValue:maxval,

displaymaxValue:formatNumber(maxval),

maxvaluetoDisplay:valuetoDisplay,

minAngle:-135,

maxAngle:135,

transitionMs:750,

currentLabelFontSize:20,

currentLabelInset:20,

labelFont:"Helvetica",

labelFontSize:15,

labelFormat:(numberToFormat)=>{

letprefix=d3.formatPrefix(numberToFormat)

returnprefix.scale(numberToFormat)+''+

prefix.symbol.toUpperCase()

},

//ToshowthecolorOfArc

arcColorFn:function(value){

letticks=[{

tick:0,

color:'#2B65EC'

},{

tick:maxval/3,

color:'#6495ED'

},{

tick:((maxval*2)/3),

color:'#3BB9FF'

}]

letret;

ticks.forEach(function(tick){

if(value>tick.tick){

ret=tick.color

return

}

});

returnret;

}

}

functionconfigure(configuration){

for(letpropinconfiguration){

config[prop]=configuration[prop]

}

}

configure({

size:200

});

letforeground,arc,svg,current;

letcur_color;

letnew_color,hold;

varoR=config.size-config.arcInset;

variR=config.size-oR-config.arcWidth;

functiondeg2rad(deg){

returndeg*Math.PI/180

}

functionrender(value){

//ArcDefaults

arc=d3.arc()

.innerRadius(iR)

.outerRadius(oR)

.startAngle(deg2rad(-135))

//Placesvgelement

svg=d3.select("."+divid).append("svg")

.attr("width",300)

.attr("height",200)

.append("g")

.attr("transform","translate(110,125)")

//Appendbackgroundarctosvg

varbackground=svg.append("path")

.datum({

endAngle:deg2rad(135)

})

.attr("class","gaugeBackground")

.attr("d",arc)

//Appendforegroundarctosvg

foreground=svg.append("path")

.datum({

endAngle:deg2rad(-135)

})

.attr("d",arc);

//DisplayMaxvalue

varmax=svg.append("text")

.attr("transform","translate(0,60)")//SetbetweeninnerandouterRadius

.attr("text-anchor","middle")

.style("font-family",config.labelFont)

.text(config.maxvaluetoDisplay)

//DisplayCurrentvalue

current=svg.append("text")

.attr("transform","translate(0,"

+-(-config.currentLabelInset+iR/4)

+")")//Pushupfromcenter1/4ofinnerRadius

.attr("text-anchor","middle")

.style("font-size",config.currentLabelFontSize)

.style("font-family",config.labelFont)

.attr("fill",textcolor)

.text(current)

}

render(0);

functionupdate(value){

//Getnewcolor

new_color=config.arcColorFn(value)

varnumPi=deg2rad(Math.floor(value*180/config.maxValue-90+45));

//DisplayCurrentvalue

current.transition()

.text(displayvalue)

//ArcTransition

foreground.transition()

.duration(config.transitionMs)

.styleTween("fill",function(){

returnd3.interpolate(new_color,cur_color);

})

.call(arcTween,numPi);

//Setcolorsfornexttransition

hold=cur_color;

cur_color=new_color;

new_color=hold;

}

//Updateanimation

functionarcTween(transition,newAngle){

transition.attrTween("d",function(d){

varinterpolate=d3.interpolate(d.endAngle,newAngle);

returnfunction(t){

d.endAngle=interpolate(t);

returnarc(d);

};

});

}

update(resvalue)

}

})

• OUTPUT :
  

Reference to resources –D3.js Library