Javascript D3:enter（）、append（）、exit（）、remove（）链

从一个外部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>

---

如果您有任何建议，我们将不胜感激，谢谢

如果你想让条在右边排列，你的

x

需要是容器的总宽度减去条的宽度。谢谢你的回复，attr.（“x”，width-barWidth）起作用：）我在修改代码时遇到了一些其他问题……如果你有时间，我将非常感谢你的建议！再次感谢！您需要处理更新选择。您发布的代码未正确应用enter/update/模式。你修好了吗？

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