введите описание изображения здесь Я использую раскладку d3.js и хочу метку на краю. Я пытался, но по краям отображаются несколько меток, и когда я хочу очистить холст, метка остается на холсте.
var edgepaths = svg.selectAll(".edgepath");
link.data(links)
.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': 'blue',
'stroke': 'red',
'id': function (d, i) { return 'edgepath' + i }
})
.style("pointer-events", "none");
var edgelabels = svg.selectAll(".edgelabel");
link.data(links)
.enter()
.append('text')
// .style("pointer-events", "none")
.attr({
'class': 'edgelabel',
'id': function (d, i) { return 'edgelabel' + i },
'dx': 50,
'dy': -2,
'font-size': 13,
'fill': '#aaa'
})
.append('textPath')
.attr('xlink:href', function (d, i) { return '#edgepath' + i })
.style("pointer-events", "none")
.text(function (d, i) { return d.linkProperties.ns.description });
Мой код в функции тиков:
edgepaths.attr('d', function(d) { var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
// console.log(path)
return path});
edgelabels.attr('transform',function(d,i){
if (d.target.x<d.source.x){
bbox = this.getBBox();
// console.log(bbox);
rx = bbox.x+bbox.width/2;
ry = bbox.y+bbox.height/2;
return 'rotate(180 '+rx+' '+ry+')';
}
else {
return 'rotate(0)';
}
});
Здесь я поделился своим скриншотом графика d3.