Javascript 无法将形状附加到svg_Javascript_D3.js_Svg

Javascript 无法将形状附加到svg

javascript d3.js svg

Javascript 无法将形状附加到svg,javascript,d3.js,svg,Javascript,D3.js,Svg,它在元素（png图像）上的dragstart事件上的打印id，但是，形状不会附加到Dragen事件上的svg window.onload = function () { var svg = d3.select("body") .append("svg") .attr("width", 800) .a

它在元素（png图像）上的dragstart事件上的打印id，但是，形状不会附加到Dragen事件上的svg

window.onload = function ()
            {
                var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 800)
                        .attr("height", 803);
            };
            var shapeId = "";

            function getId(id)
            {
                shapeId = id;
                console.log(shapeId);
            }

            function createShape()
            {
                if (shapeId == 'newTask')
                {
                    createRect();
                }
            }

            function createRect() 
            {
                console.log("createRect function called");
                svg.append("rect")
                        .attr("id", "onRectDragStart")
                        .attr("rx", 10)
                        .attr("width", 51)
                        .attr("height", 41)
                        .attr("x", "100")
                        .attr("y", "100")
                        .attr("stroke-width", 2)
                        .attr("stroke", "#7E7E7E")
                        .style('cursor', 'move')
                        .style("fill", "white")
                        .classed("initialDragRect", true);
            }

HTML:

createRect（）

函数在控制台内作为其打印消息被调用，但形状未被追加

createShape（this）

在dragend事件中被调用为内部div标记

您在此处正确地将var

svg

设置为svg：

var svg=d3.选择（“正文”）.追加（“svg”）

但随后您将其重新分配到

主体

元素

var svg=d3.select（'body'）
删除var svg=d3。选择（'body'）
并且您应该能够附加到svg
中，只需使用：svg.append（“rect”）

请记住，当您这样做时：var svg=d3.选择（“body”）.append（“svg”）
，varsvg
保存您附加到body
的svg元素，而不是body
本身
N.b.这里是一个显示呈现svg
和rect
的最小代码的示例，如果您的代码仍然不工作，那么它可能与您调用代码的方式以及调用代码的位置/时间有关。（问题中未包括此选项）
您在此处将varsvg
正确设置为svg：
var svg=d3.选择（“正文”）.追加（“svg”）

但随后您将其重新分配到主体
元素
var svg=d3.select（'body'）
删除var svg=d3。选择（'body'）
并且您应该能够附加到svg
中，只需使用：svg.append（“rect”）

请记住，当您这样做时：var svg=d3.选择（“body”）.append（“svg”）
，varsvg
保存您附加到body
的svg元素，而不是body
本身
N.b.这里是一个显示呈现svg
和rect
的最小代码的示例，如果您的代码仍然不工作，那么它可能与您调用代码的方式以及调用代码的位置/时间有关。（问题中未包括此选项）
您应该在DOM完全加载后加载脚本，因为您正在使用事件与DOM交互
例如：
 <!DOCTYPE HTML>
    <html>

    <head>
      <!-- yada yada yada -->
    </head>

    <body>
      <p id='p1'>Line 1</p>
      <script type='text/javascript'>
        document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>");
        document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>");
      </script>
      <p id='p2'>Line two</p>
    </body>

    </html>

因为p1在脚本运行时存在，但p2不存在
查看谷歌开发者提供的更多信息。帮助这有助于
您应该在DOM完全加载后加载脚本，因为您正在使用事件与DOM交互
例如：
 <!DOCTYPE HTML>
    <html>

    <head>
      <!-- yada yada yada -->
    </head>

    <body>
      <p id='p1'>Line 1</p>
      <script type='text/javascript'>
        document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>");
        document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>");
      </script>
      <p id='p2'>Line two</p>
    </body>

    </html>

因为p1在脚本运行时存在，但p2不存在
查看谷歌开发者提供的更多信息。帮助当我删除var svg=d3.select（'body'）
它抛出了一个错误：Uncaught ReferenceError:svg未定义时，这会有所帮助
。您可能在调用createRect
函数的时间/地点遇到问题（即，此时是否加载了D3？是否加载了dom？）正如我所怀疑的，您在定义createShape
之前调用它（从JSFIDLE中的错误可以看出）。请尝试在html之前加载函数，或者将所有代码放在document.ready（）中的readyTried文档中。还是一样的问题。当我删除var svg=d3.select（'body'）
它抛出一个错误：Uncaught ReferenceError:svg未定义
添加了一个JSFIDLE，显示所需的最小代码。您可能在调用createRect
函数的时间/地点遇到问题（即，此时是否加载了D3？是否加载了dom？）正如我所怀疑的，您在定义createShape之前调用它（从JSFIDLE中的错误可以看出）。请尝试在html之前加载函数，或者将所有代码放在document.ready（）中的readyTried文档中。还是一样的问题。
Line 1
p1 is null? false
p2 is null? true
Line 2