【D3.js数据可视化系列教程】--（八）使用D3绘制SVG

来源：互联网发布：软件测评师考试内容编辑：程序博客网时间：2024/04/30 02:09

1 创建SVG

// SVG尺寸var w = 500;var h = 50;var svg = d3.select("body")            .append("svg")            .attr("width", w) // 设置高宽            .attr("height", h);

2 数据驱动的SVG

var dataset = [ 5, 10, 15, 20, 25 ];var circles = svg.selectAll("circle")                 .data(dataset)                 .enter()                 .append("circle");circles.attr("cx", function(d, i) {        return (i * 50) + 25;    })   .attr("cy", h/2)   .attr("r", function(d) {        return d;   });

3 源码

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>testD3-7-drawSVG.html</title>    <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script><style type="text/css">    </style></head><body><script type="text/javascript">    // SVG尺寸    var w = 500;    var h = 50;    // 数据    var dataset = [ 5, 10, 15, 20, 25 ];    // 创建SVG容器    var svg = d3.select("body")                .append("svg")                .attr("width", 500)                .attr("height", 50);    // 创建圆    var circles = svg.selectAll("circle")        .data(dataset)        .enter()        .append("circle");    // 根据数据设置每个圆的属性    circles.attr("cx", function(d, i) {            return (i * 50) + 25;        })       .attr("cy", h/2)       .attr("r", function(d) {            return d;       });</script></body></html>

4 效果

使用D3绘制SVG