2

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

我已经在矩形上放置了过渡，问题是文本首先出现，我想要的是只有在过渡完成时才能出现文本。

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

另外，我如何将书面文本加粗并在其下方放置一行作为分隔符。

谢谢

4

1 回答 1

4

您想使用 event end，它的使用方式如下：

d3.select("#myid").transition().style("opacity","0").each("end", myCallback);

这里有一个演示。

End 绑定到过渡对象，并在过渡完成时触发。myCallback将是您要使用的功能。

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

于 2013-07-15T14:05:54.613 回答