文本没有出现在DOM对象中?

时间:2013-06-13 19:26:08

标签: javascript html dom d3.js

我正在尝试在javascript中创建一个对象并向其添加文本。我可以将文本附加到svg上,但是当我尝试将其附加到圆圈时,它就不会出现。

这就是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>D3 Tutorial</title>
    <script src="http://d3js.org/d3.v3.min.js">  </script>
</head>
<body>
    <script>

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

        var circle = canvas.append("circle")
                        .attr("cx", 400)
                        .attr("cy", 350)
                        .attr("r", 25);

        canvas.append("text")
            .attr("fill", "red")
            .attr("y", 50)
            .text("hello");


        circle.append("text")
                .attr("fill", "red")
                .attr("y", 50)
                .text("hello");

    </script>
</body>
</html>

这是它出现的方式: The result

1 个答案:

答案 0 :(得分:3)

SVG必须遵循某种结构。将text元素附加到circle(或rect或类似内容)无效,因此无法显示。