0

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>

次のように表示されます。 結果

4

1 に答える 1

3

SVG は特定の構造に従わなければなりません。text要素を a circle(または類似のもの) に追加するrectことは有効ではないため、表示されません。

于 2013-06-13T19:40:26.537 に答える