[D3] 2. Basics of SVG
1. svg should use 'fill' prop instead 'background-color'
2. svg width & height no need 'px'
3. attr(function(data_val, index){})
4. create svg, d3.select('selector').append('svg').attr('width', xxx).attr('height', xx)
5. svg should use 'rect' instead of 'div'
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../ventor/d3.min.js"></script>
<style type="text/css"> body
{
padding-top: 50px;
padding-left: 100px; } #chartArea {
width: 400px;
height: 300px;
background-color: #CCC;
} .bar
{
display: inline-block;
width: 20px;
height: 75px; /* Gets overriden by D3-assigned height below */
margin-right: 2px;
fill: teal; /* SVG doesn't have background prop, use fill instead*/
z-index:99;
} </style>
</head>
<body>
<section id="chartArea"></section>
<script>
var dataset = [3,5,7,9,4,6];
var svg = d3.select('#chartArea').append('svg')
.attr('width', 400)
.attr('height', 300); //svg deosn't need 'px' svg.selectAll('div')
.data(dataset)
.enter()
.append('rect')// svg doesn't have div, use rect instead
.attr('class', "bar")
.attr('width', 20)
.attr('x', function(each_data, index){
return index * 22;
})
.attr('y', function(each_data){
return 300-each_data*10;
})
.attr('height', function(each_data, i){
return each_data * 10; // svg doesn't have 'style'
});
</script> <!--
1. svg should use 'fill' prop instead 'background-color'
2. svg width & height no need 'px'
3. attr(function(data_val, index){})
4. create svg, d3.select('selector').append('svg').attr('width', xxx).attr('height', xx)
5. svg should use 'rect' instead of 'div'
-->
</body>
</html>
[D3] 2. Basics of SVG的更多相关文章
- D3.js & Data Visualization & SVG
D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...
- d3 根据数据绘制svg
, , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...
- d3创建多个svg元素
当然也可以创建dom var svg = d3.select('#svg'); svg .slectAll('circle.bb') //选中DOM中的所有circle.bb标签,当DOM中不 ...
- svg + d3
为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...
- D3+svg 案例
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- [D3] 3. Scaling Basics
d3.scale.linear() <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- d3可视化实战01：理解SVG元素特性
一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...
- 【D3.V3.js系列教程】--（十五）SVG基本图形绘制
[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...
- 使用d3.v3插件绘制出svg图
众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的 接下来看代码吧 从后台获取到带id和父id的目录数据[json格式] var module = requestU ...
随机推荐
- JavaMail 发送邮件
JavaMail邮件发送 引用maven jar包 <dependency> <groupId>javax.mail</groupId> <artifactI ...
- MySQL简单使用
1.启动MySQL服务器实际上上篇已讲到如何启动MySQL.两种方法:一是用winmysqladmin,如果机器启动时已自动运行,则可直接进入下一步操作.二是在DOS方式下运行 d:/mysql/bi ...
- C#中引用（ref关键字）参数
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 函数的参 ...
- Linux下fork()、vfork()、clone()和exec()的区别
转自Linux下fork().vfork().clone()和exec()的区别 前三个和最后一个是两个类型.前三个主要是Linux用来创建新的进程(线程)而设计的,exec()系列函数则是用来用指定 ...
- Web-Scale IT 我之见！
Gartner 曾在发表过的一篇文章中表示,到2017年,全球50%的企业将使用Web-Scale IT 架构.下面我们来看看 Andre Leibovici 对 Web-Scale IT 的看法: ...
- android Mediaplayer硬件解码浅探
在讨论stagefright如何调用硬件解码之前,我们要先清楚几个问题. 我不展开这几个结论是如何得来的,因为这部分属于进程间通信binder的理解,和多媒体本身无关. 一．问题空间 这个有点像方法学 ...
- MySQL show status详解
http://www.sandzhang.com/blog/2010/04/07/mysql-show-status-explained-detail/ 要查看MySQL运行状态,要优化MySQL运行 ...
- 一个sql导致temp表空间爆掉
Buffer sort引发的血案 今天遇到的一个问题,在线系统上,有两张表,test1大概50G,test2大概200G,需要查询出来test1表中部分记录,并且这些记录不存在test2表中.于是就写 ...
- 【转】Android4.4（MT8685）源码蓝牙解析--BLE搜索
原文网址:http://blog.csdn.net/u013467735/article/details/41962075 BLE:全称为Bluetooth Low Energy.蓝牙规范4.0最重要 ...
- 动态规划（树形DP）：LNOI 2016 侦察守卫
Sample Input 12 2 8 9 12 6 1 1 5 1 4 8 10 6 10 1 2 3 5 6 7 8 9 10 11 1 3 2 3 3 4 4 5 4 6 4 7 7 8 8 9 ...