D3.js实现动态生成svg内容

最新推荐文章于 2025-05-30 20:43:01 发布

爱的叹息

最新推荐文章于 2025-05-30 20:43:01 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端[html 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/zp357252539/article/details/125086147

web前端[html 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用D3.js在SVG中创建基本图形，包括绘制一条红色直线、绿色矩形、圆形和椭圆。通过实例展示了如何设置SVG元素的位置、大小和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考

D3.js - Introduction to SVG_学习D3JS|WIKI教程 SVG是一种基于XML的矢量图形格式。.SVG应该具有相对于原点（0,0）的绝对位置。.Step 1 - 创建SVG图像并将宽度设置为300像素，高度设置为300像素。.这里， svg标签启动SVG图像，它具有宽度和高度作为属性。. style属性使用stroke和stroke-width样式设置线条的颜色和粗细。https://iowiki.com/d3js/d3js_introduction_to_svg.html

生成线段

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>
   <body>
      <div id = "svgcontainer">
      </div>
      <script language = "javascript">
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

生成矩形

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>
   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

生成圆形

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>
   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

生成椭圆

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>
   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>