Создайте кнопку закрытия на svg, используя d3.js

Question

Я новичок в d3.js, и у меня есть требование создать кнопку закрытия [x] в правом верхнем углу прямоугольника. При нажатии кнопки прямоугольник следует удалить из диаграммы.
Я рассматриваю использование svg remove, как указано в связанном контенте.
В настоящее время я использую букву X в качестве кнопки закрытия. Однако эта реализация, похоже, не работает, письмо не видно (несмотря на появление в DOM).

bl.ocks ссылка здесь: http://bl.ocks.org/bhandarisumit/b48e134e358f94a290a2

Код:

var margin = {top: 15, right: 40, bottom: 20, left: 50}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 240 - margin.top - margin.bottom; 
 

 

 
var svg = d3.select("body").append("svg") 
 
.attr("width", width + margin.left + margin.right) 
 
.attr("height", height + margin.top + margin.bottom) 
 
.append("g") 
 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 

 
var clip = svg.append("defs").append("svg:clipPath") 
 
.attr("id", "clip") 
 
.append("svg:rect") 
 
.attr("id", "clip-rect") 
 
.attr("x", "0") 
 
.attr("y", "0") 
 
.attr("width", width) 
 
.attr("height", height); 
 

 
var chartBody = svg.append("g") 
 
.attr("clip-path", "url(#clip)"); 
 

 
var rect = chartBody.append('svg:rect') 
 
.attr('width', width-20) 
 
.attr('height', height-20) 
 
.attr('fill', 'white'); 
 

 

 
var labeledRect = chartBody.append("rect") 
 
.attr("x", 0) 
 
.attr("y", 0) 
 
.attr("height", height-20) 
 
.attr("width", width-20) 
 
.style("stroke", "red") 
 
.attr("class", "labelbox") 
 
.style("fill", "none"); 
 

 
var closeArea = chartBody.append('text') 
 
.text('X') 
 
.attr("font-family", "sans-serif") 
 
.attr("font-size", "20px") 
 
.attr("fill", "red"); 
 
labeledRect.append('text').attr('color','black').text('X');

body { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.x.axis path { 
 
    display: none; 
 
} 
 

 
.line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 2px; 
 
} 
 

 
rect { 
 
    fill: #fff; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.js"></script>

Answer 1

Буква 'X' находится вне зоны элемента 'Rect', так что невидимый.
Элемент 'text' имеет атрибуты 'x' и 'y' (по умолчанию 0) для его позиции,
, но координата указывает положение левого нижнего угла текста.
Так что, если вы не задаете атрибут 'y', текст не отображается, потому что 'y' равно 0.
Я вставил в ваш код строку .attr("y", 20). Пожалуйста, попробуйте это.

var closeArea = chartBody.append('text') 
.text('X') 
.attr("y", 20) 
.attr("font-family", "sans-serif") 
.attr("font-size", "20px") 
.attr("fill", "red"); 

Альтернативное решение с использованием dominant-baseline атрибута, как это:

var closeArea = chartBody.append('text') 
.text('X') 
.attr("dominant-baseline","text-before-edge") 
.attr("font-family", "sans-serif") 
.attr("font-size", "20px") 
.attr("fill", "red");