【D3.js数据可视化系列教程】（二十六）--加载SVG文件

最新推荐文章于 2024-03-04 10:47:18 发布

司机大傻

最新推荐文章于 2024-03-04 10:47:18 发布

阅读量1w

点赞数 9

分类专栏：数据可视化 D3数据可视化系列教程文章标签： d3 d3.js d3js 数据可视化

本文链接：https://blog.csdn.net/tianxuzhang/article/details/14122495

版权

数据可视化同时被 2 个专栏收录

44 篇文章 47 订阅

订阅专栏

D3数据可视化系列教程

36 篇文章 203 订阅

订阅专栏

1. Rect01.svg文件

用到d3.xml函数，第一个参数是地址，第二个参数是个回调函数

<?xml version="1.0" standalone="no"?>   
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg width="12cm" height="4cm" viewBox="200 200 1200 400"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">  
    
  <desc>Example rect01 - rectangle with sharp corners</desc>   
    
  <rect x="100" y="1" width="1198" height="398"  
        fill="none" stroke="blue" stroke-width="2"/>   
   
  <rect x="100" y="200" width="400" height="200"  
        fill="yellow" stroke="navy" stroke-width="10"  />   
</svg>

2. 加载SVG

d3.xml("http://localhost:8080/spring/D3data/Rect01.svg", "image/svg+xml", //加载文件  
function(xml) {  
   document.body.appendChild(xml.documentElement);//添加DOM节点  
});