Question

添加到群组无效。我创建了一个组并附加了一个矩形和一个圆圈。我可以看到矩形，但我无法在屏幕上看到圆圈。但是，检查控制台中显示圆圈的元素。

演示：http://jsbin.com/gebivavuxi/1/edit?html,js,output

<!doctype html>
<html>
    <head>
        <title>Editor</title>
        <meta http-equiv="x-ua-compatible" content="ie=9"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
        <script type="text/javascript">
            window.onload = function ()
            {
                var svgContainer = d3.select("body").append("svg")
                        .attr("width", 800)
                        .attr("height", 803);

                var group = svgContainer.append("g")
                        .append("rect")
                        .attr("x", 250)
                        .attr("y", 250)
                        .attr("width", 351)
                        .attr("height", 241)
                        .attr("rx", 10)
                        .attr("stroke-width", 2)
                        .attr("stroke", "#7E7E7E")
                        .style("fill", "none");

                group.append("circle")
                        .attr("cx", 10)
                        .attr("cy", 10)
                        .attr("r", 25)
                        .style("fill", "red")
                        .style("stroke-width", 2)
                        .style("stroke", "#CDB483");

            };
        </script>
    </head>
    <body>
        <div id="container">
            <div id="header" style="margin-bottom: 0;">
                <h1 id="title">Editor</h1>
                <div id="footer"></div>
            </div>
        </div>
    </body>
</html>

Answer 1

当前编写代码的方式，group变量指的是rect元素。只需更改代码的这一部分：

var group = svgContainer.append("g")
    .append("rect")
    ...

为：

var group = svgContainer.append("g");

group
    .append("rect")
    ...

为了将g元素分配给group变量，然后将rect和circle附加到g元素。

追加到不在d3 js工作的小组

1 个答案: