仅在转换完成后显示文本d3.js

我在单击圆时以矩形显示数据

我已经把转换放在矩形上，问题是文本首先出现，我想要的是文本应该只在转换完成后出现

    var width = 960,
        height = 500;

        var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)

        d3.json("data.json", function (json) {
            /* Define the data for the circles */
            var elem = svg.selectAll("g myCircleText")
            .data(json.nodes)

            /*Create and place the "blocks" containing the circle and the text */
            var elemEnter = elem.enter()
            .append("g")
            .attr("transform", function (d) { return "translate(" + d.x + ",80)" })

            /*Create the circle for each block */
            var circle = elemEnter.append("circle")
            .attr("r", function (d) { return d.r })
            .attr("stroke", "black")
            .attr("fill", "white")
            .on("click", function (d) {
                var g = svg.append("g")
               .attr("transform", "translate(50,50)");

                g.append("rect")
               .attr("width", 200)
              .attr("height", 200)
              .style("fill", "red")
              .transition()
               .duration(750)
              .attr("width", 500)
              .attr("height", 500);
               g.append("text")
               .attr("dx", "200")
               .attr("dy", "200")
                .text(d.info);
                g.append("text")
               .attr("dx", "200")
               .attr("dy", "300")
               .text(d.country);

            });

            /* Create the text for each block */
            elemEnter.append("text")
            .attr("dx", function (d) { return -20 })
            .text(function (d) { return d.label })
        })


data.json file is:
{"nodes":[
  {"x":80, "r":40, "label":"Pam","info":"Developer","country":"India"}, 
  {"x":200, "r":60, "label":"Sam","info":"Programmer","country":"US"}, 
  {"x":380, "r":80, "label":"Ram","info":"Senior Programmer","country":"Canada"}
]}

还有我如何加粗书写的文本，并在下面放一行作为分隔符

---

谢谢

您想使用事件结束，其使用方式如下：

d3.选择（“#myid”）.transition（）.style（“不透明”，“0”）.each（“结束”，myCallback）

有一个演示

End绑定到过渡对象，并在过渡完成时激发
myCallback
将是您想要使用的函数

在您的情况下，这将附加您的文本。由于SVG文本不存在
标记，因此您需要为文本使用适当的.css样式。您可以将它们放在
.highlightText
类下的样式表中，也可以使用
d3.select（stuff）.css（myCssObject）
方法应用它们。
您想使用事件
end
，如下所示：

d3.选择（“#myid”）.transition（）.style（“不透明”，“0”）.each（“结束”，myCallback）

有一个演示

End绑定到过渡对象，并在过渡完成时激发
myCallback
将是您想要使用的函数

在您的情况下，这将附加您的文本。由于SVG文本不存在
标记，因此您需要为文本使用适当的.css样式。您可以将它们放在
.highlightText
类下的样式表中，也可以使用
d3.select（stuff）.css（myCssObject）
方法应用它们。
您好，亲爱的，非常感谢是的，它成功了，我还有一个小问题，“每次单击Circle时，svg的格式如下：高级程序Mercanada，因此前一个文本也会持续存在，我想要的是隐藏前一个文本，或者创建标签的单个实例，隐藏并显示它。您能提供帮助吗？在您的转换过程中，请尝试对您先前存在的SVG文本元素使用
.text（）
方法，而不是使用
.append
创建新的文本元素。您好，亲爱的，非常感谢是的，它起了作用，我还有一个小问题，“每次单击Circle时，svg的格式如下：高级程序Mercanada，因此前一个文本也会持续存在，我想要的是隐藏前一个文本，或者创建标签的单个实例，隐藏并显示它。您可以提供帮助吗？在转换过程中，请尝试对您先前存在的SVG文本元素使用
.text（）
方法，而不是使用
.append
创建新的文本元素。