如何删除SVG内容

为了删除SVG内容，可以使用D3.js提供的remove()函数。remove()函数与D3.js提供的另外两个方法一起使用。以下是这些方法：

使用select()方法和remove()方法： d3.select()方法用于选择需要删除的第一个元素。

语法：

d3.select("element").remove()

示例： 在这个示例中，第一个段落（p）元素被移除。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        How can I remove SVG content? 
    </title> 
  
    <script src= 
"https://d3js.org/d3.v4.min.js"> 
      </script> 
</head> 
  
<body style="text-align:center"> 
  
    <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
    <h3> How can I remove SVG content?</h3> 
    <p>Geeks1</p> 
    <p>Geeks2</p> 
    <p>Geeks3</p> 
    <script> 
        // Calling the selectAll() function 
        d3.select("p").remove(); 
    </script> 
</body> 
</html>

输出:

如何删除SVG内容

使用 selectAll() Method with remove() Method: d3.selectAll() 方法用于选择所有匹配的元素并将其移除。

语法:

d3.selectAll("element").remove()

示例: 在这个示例中，所有段落（p）元素都被删除了。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        How can I remove SVG content? 
    </title> 
  
    <script src= 
"https://d3js.org/d3.v4.min.js"> 
      </script> 
</head> 
  
<body style="text-align:center"> 
  
    <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
    <h3> How can I remove SVG content?</h3> 
    <p>Geeks1</p> 
    <p>Geeks2</p> 
    <p>Geeks3</p> 
    <script> 
        // Calling the selectAll() function 
        d3.selectAll("p").remove(); 
    </script> 
</body> 
</html>

输出：

如何删除SVG内容