Question

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

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

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

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

由于

Answer 1

您想要使用事件end，其使用方式如下：

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

有一个演示here.

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

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

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

1 个答案: