Question

它在元素（png图像）上的dragstart事件上打印id但是，在dragend事件中，形状没有附加到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：

<div id="content">
            <div style="position: relative; height: 100%;">
            <div><a id="newTask" title="Add new task" draggable="true" ondragstart=getId(this.id) ondragend="createShape(this)"><img src="task.png" /></a></div>
   </div>
    <div id="canvas" tabindex="0"></div>
</div>

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

在dragend事件

上的div标签内调用

createShape(this)

Answer 1

您正在将var svg正确设置为svg：

var svg = d3.select("body").append("svg")

然后将其重新分配给body元素

var svg = d3.select('body');

删除var svg = d3.select('body');，您应该能够附加到svg，只需找到：svg.append("rect")

请记住，当您执行：var svg = d3.select("body").append("svg")时，var svg会保存您附加到body的svg元素，而不是body本身

Nb 以下是jsfiddle，其中显示了呈现svg和rect的最低代码，如果您的代码仍无效，则可能与如何调用代码以及调用代码的位置/时间。（不包括在问题中）

Answer 2

您应该在完全加载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>

您看到的输出是：

Line 1
p1 is null? false
p2 is null? true
Line 2

因为p1在脚本运行时存在，但p2不存在。

谷歌开发者查看此link了解详情。帮助这有帮助

无法将形状附加到svg

2 个答案: