仅在转换完成后才显示文本d3.js [英] Show text only after transition is complete d3.js

问题描述

我在点击圆圈时在矩形中显示数据，

I am showing data in rectangle on click of circle,

我已将转换放在矩形上，问题是文本先来，我想要的是文本应该

I have put transition on rectangle, Issue is text comes first , what I want is text should come only when transition is complete.

    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"}
]}

此外，我如何加粗书写的文字，并在其下面添加一行作为分隔符。

Also how I can bold the written text and put a line below it as a separater.

p>

推荐答案

您想要使用事件 end

d3.select（＃myid）。transition（）。style（opacity，0）。 end，myCallback）;

它有一个演示这里。

There's a demo of it here.

结束绑定到过渡对象，当过渡完成时触发。 myCallback 将是您要使用的函数。

End is bound to the transition objects, and fires when the transition finishes. myCallback would be the function you want to use.

在您的情况下，这会附加您的文字。由于对于SVG文本，不存在< b> 标记，因此您需要为文本使用适当的.css样式。你可以将它们放在 .highlightText 类下的样式表中，也可以使用 d3.select（stuff）.css（myCssObject ）方法。

In your case, this would append your text. Since <b> tags don't exist for SVG text, you'll want to use the appropriate .css styles for your text. You can either put them in a stylesheet under a .highlightText class, or you can apply them with the d3.select(stuff).css(myCssObject) method.

这篇关于仅在转换完成后才显示文本d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！