D3.js SVG线示例

织梦狗教程前端实例代码

1970-01-01

!DOCTYPE htmlhtmlheadscript type = text/javascript src = https://d3js.org/d3.v4.min.js/script

编程学习网为您整理以下代码实例，主要实现：D3.js SVG线示例，希望可以帮到各位朋友。

<!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>

织梦狗教程

本文标题为：D3.js SVG线示例