D3：输入（），追加（），退出（），删除（）链

Question

从外部API中提取，当我将鼠标悬停在其上时，我正在尝试为每个书名创建一个小条形图。每个图表代表图书的ISBN-10编号。

目前，我只看到我悬停的第一本书的图表。当我将鼠标悬停在其他人身上时，它不会改变。在我的代码中，我使用exit（）和remove（）来尝试修改它，但也许我错误地使用了它。

我的D3代码：

    function barcode10(responseData) {

        var w = 125;
        var h = 150;

        d3.select("#barcode10")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        var barcode10 = svg.selectAll("rect")
                        .data(responseData);

        barcode10.enter().append("rect")

                            .style("fill", "rgb(255,55,0)")

                            .attr("x", function(d) {
                                return 125- (d * 10);
                            })
                            .attr("y", function(d, i) {
                                return i * 15
                            })


                            .attr("width", function(d) {
                                var barWidth = d * 10;
                                return barWidth + "px";
                            })
                            .attr("height", 15 + "px");

        barcode10.exit().remove();

    }

我的HTML：

<div>
    <svg id="barcode10"></svg>
</div>

我的css：

#barcode10 {
    position: fixed;
    background-color: transparent;
    outline: red solid 1px;
    width: 125px;
    height: 150px;
    top: 100px;
    left: 117px
}

任何指示都将不胜感激，谢谢！