D3子弹图将其他文本添加到放置数据的标记中

Question

我使用来自stefan walther [1]：sanitized的D3子弹图作为起点，使用D3 javascript库和style.css从qlikview编写扩展以适合特定目的 - 我添加了额外的标记来表示等级边界，并根据Qlik的数据将它们放在图表上。我的问题是我想附加额外的文本/换行文本来表示标记的等级，例如你有93分，而且你的A分数是3分。我写了一个包含成绩的简单数组，我试图将它们附加到以下代码中 -

    var gradeData = ["A*", "A", "B", "C", "D", "E", "F", "G"];

            var marker = g.selectAll("line.marker")
             .data(markerz);

                 marker.enter().append("line")
                .attr("class", "marker")
                .attr("x1", x0)
                .attr("x2", x0)
                .attr("y1", height / 6)
                .attr("y2", height * 5 / 6)
                .attr("fill", "red")
                .transition()
                .duration(duration)
                .attr("x1", x1)
                .attr("x2", x1);

                 marker.transition()
                .duration(duration)
                .attr("x1", x1)
                .attr("x2", x1)
                .attr("y1", height / 6)
                .attr("y2", height * 5 / 6);

            var markerLabel = g.selectAll("text.marker")
            .data(markerz);

           markerLabel.enter().append("text")
            .attr("class", function (d, i) { return gradeData[i];})
            .attr("dy", "1em")
            .attr("dx", "1em")
            .text(String)
            .attr("fill", "red")
            .attr("x", reverse ? function(d) { return w0(d) + x0(d); } : w0)
            .attr("y", height / 3);

             markerLabel.transition()
            .duration(duration)
            .attr("x", reverse ? function(d) { return w1(d) + x1(d); } : w1);

什么都没有出现。也许你可以帮我理解我哪里出错了。提前谢谢你：）