Javascript 在svg图表（D3.js）顶部添加div

我有一个条形图，我想在每个条形图的右上角添加一个红色的圆x，以显示用户可以删除特定的条形图，但我很难确定如何添加它。这是我喜欢的最终图像，但也重复了其他四个酒吧以及

我已经提供了一个JSFIDLE和JS代码，除了没有红色的x之外，它可以完成我喜欢的图形所做的一切

它的CSS是

    .btn-circle {
        width: 19px;
        height: 19px;
        text-align: center;
        padding: 1px 0;
        font-size: 13px;
        line-height: 0.1;
        border-radius: 30px;
    }

这在JSFIDLE中提供。任何帮助都将不胜感激

---

谢谢

与附加

div

（或任何其他不能附加到SVG的HTML元素）相比，更容易附加SVG圆圈元素和SVG文本元素，模拟按钮：

var circles = svg.selectAll('.circles')
    .data(data)
    .enter()
    .append('circle').attr("cursor", "pointer")
    .attr('cx', function (d, i) {
        return xScale(i)+ xScale.bandwidth();
     })
    .attr('cy', function(d, i) {
        return yScale(0);
    })
    .attr('fill', "red").attr("r", 8)
    .transition()
    .duration(1500)
    .attr('cy', function(d, i) {
         return yScale( d.value );
    });

var xtext = svg.selectAll('.xtext')
    .data(data)
    .enter()
    .append('text')
    .attr('x', function (d, i) {
        return xScale( i )+ xScale.bandwidth();
    })
    .attr('y', function( d, i ) {
        return yScale( 0 );
    })
    .attr('fill', "white")
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "central")
    .attr("pointer-events", "none")
    .text("x")
    .transition()
    .duration( 1500 )
    .attr( 'y', function( d, i ) {
       return yScale( d.value );
    });

这是小提琴：

---

PS：这只会添加圆圈，您必须单独添加行为。

与添加

div

（或任何其他无法添加到SVG的HTML元素）相比，添加SVG圆圈元素和SVG文本元素更容易，模拟按钮：

var circles = svg.selectAll('.circles')
    .data(data)
    .enter()
    .append('circle').attr("cursor", "pointer")
    .attr('cx', function (d, i) {
        return xScale(i)+ xScale.bandwidth();
     })
    .attr('cy', function(d, i) {
        return yScale(0);
    })
    .attr('fill', "red").attr("r", 8)
    .transition()
    .duration(1500)
    .attr('cy', function(d, i) {
         return yScale( d.value );
    });

var xtext = svg.selectAll('.xtext')
    .data(data)
    .enter()
    .append('text')
    .attr('x', function (d, i) {
        return xScale( i )+ xScale.bandwidth();
    })
    .attr('y', function( d, i ) {
        return yScale( 0 );
    })
    .attr('fill', "white")
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "central")
    .attr("pointer-events", "none")
    .text("x")
    .transition()
    .duration( 1500 )
    .attr( 'y', function( d, i ) {
       return yScale( d.value );
    });

这是小提琴：

---

PS：这只会添加圆，您必须单独添加行为。

您需要X与条一起增长吗？或者只是出现在动画的结尾？对不起，如果有人提到，我认为如果图标保持不变，只要它出现在右上角就可以了。如果我真的想让它成长，我想我可以把它放在一个有响应的div中，那没关系，但我不确定。我的意思是-你需要动画化它们-用条带起来，出现在SVG加载的末尾，或者只是一直在那里？哦，我的错误，是的，我喜欢它们从底部开始，如果可能的话，然后随着条带起来。嗯，此SVG根据窗口高度更改大小。它不会是固定大小的吗？你需要X和条一起增长吗？或者只是出现在动画的结尾？对不起，如果有人提到，我认为如果图标保持不变，只要它出现在右上角就可以了。如果我真的想让它成长，我想我可以把它放在一个有响应的div中，那没关系，但我不确定。我的意思是-你需要动画化它们-用条带起来，出现在SVG加载的末尾，或者只是一直在那里？哦，我的错误，是的，我喜欢它们从底部开始，如果可能的话，然后随着条带起来。嗯，此SVG根据窗口高度更改大小。它不会是固定大小的吗？

var circles = svg.selectAll('.circles')
    .data(data)
    .enter()
    .append('circle').attr("cursor", "pointer")
    .attr('cx', function (d, i) {
        return xScale(i)+ xScale.bandwidth();
     })
    .attr('cy', function(d, i) {
        return yScale(0);
    })
    .attr('fill', "red").attr("r", 8)
    .transition()
    .duration(1500)
    .attr('cy', function(d, i) {
         return yScale( d.value );
    });

var xtext = svg.selectAll('.xtext')
    .data(data)
    .enter()
    .append('text')
    .attr('x', function (d, i) {
        return xScale( i )+ xScale.bandwidth();
    })
    .attr('y', function( d, i ) {
        return yScale( 0 );
    })
    .attr('fill', "white")
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "central")
    .attr("pointer-events", "none")
    .text("x")
    .transition()
    .duration( 1500 )
    .attr( 'y', function( d, i ) {
       return yScale( d.value );
    });