d3 v4 force layout with drag,zoom and edge label - d3.js

Question

I am trying implement labels on links in d3 v4 force layout. Although I am following code from a b.lock, I face difficulty to achieve the labelling. I am probably missing some basics at svg.selectAll and svg.append .
svg = d3.select("#svgdiv").append('svg').attr('width',width).attr('height',height).style("border","1px solid black"),
width = +svg.attr("width"),
height = +svg.attr("height");
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "black")
.style("pointer-events", "all")
.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed));
g=svg.append("g");
function zoomed() {
g.attr("transform", d3.event.transform);
}
link = g.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.edge)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); })
.attr("id",function(d,i) {return 'edge'+i});
node = g.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.node)
.enter().append("circle")
.attr("r", radius)
.attr("fill", function(d) { return color(d.group); })
.on("click", mouseClick(.2))
.on("dblclick", mouseDblClick)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
Till here, the code is ok. But when I add the following code for labelling, it stops working.
edgepaths =svg.selectAll(".edgepath")
.data(graph.edge)
.enter()
.append('path')
.attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
'class':'edgepath',
'fill-opacity':0,
'stroke-opacity':0,
'fill':'green',
'stroke':'yellow',
'id':function(d,i) {return 'edgepath'+i}})
.style("pointer-events", "none");
edgelabels =svg.selectAll(".edgelabel")
.data(graph.edge)
.enter()
.append('text')
.style("pointer-events", "none")
.attr({'class':'edgelabel',
'id':function(d,i){return 'edgelabel'+i},
'dx':80,
'dy':0,
'font-size':10,
'fill':'white'});
edgelabels.append('textPath')
.attr('xlink:href',function(d,i) {return '#edgepath'+i})
.style("pointer-events", "none")
.text(function(d,i){return 'label '+i});
function ticked() {
node
.attr("cx", function(d) { return d.x;})
.attr("cy", function(d) { return d.y;})
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
edgepaths.attr('d', function(d) {
var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
//console.log(d)
return path});
edgelabels.attr('transform',function(d,i){
if (d.target.x<d.source.x){
bbox = this.getBBox();
rx = bbox.x+bbox.width/2;
ry = bbox.y+bbox.height/2;
return 'rotate(180 '+rx+' '+ry+')';
}
else {
return 'rotate(0)';
}
});
}
please help.
thank you.
JSON data.
{
"edge":[
{"source":"source1","target":"target1","value":"1"},
{"source":"source2","target":"target2","value":"0"},
.
.
],
"node":[
{"group":0,"id":"source1"},
{"group":3,"id":"source2"},
.
.
]
}