[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 ...
随机推荐
- WebComponent
WebComponent 前言 最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得到的结果是:& ...
- iOS开发之Runloop（转）
Objective-C之run loop详解 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/9237973 转载请注明出 ...
- tabbar - 取消系统渲染
/** 1. 取消自动渲染 - 图片***/ viewCon1.tabBarItem.selectedImage = [[UIImage imageNamed:@"tabbar_home_ ...
- git 常用命令行整理
1.创建分支dev git branch dev 2.切换到dev分支 git checkout dev 3.创建并切换本地分支,分支名为dev git checkout -b dev 4.查看本地所 ...
- poj 1284 Primitive Roots
从来没有接触过完全剩余系,不会证明,知道看了别人的题解才知道要用欧拉函数: 下面是证明过程: p是奇素数,如果{xi%p | 1 <= i <= p - 1} = {1,2,...,p-1 ...
- 【网络流24题】 No.22~24
接下来几题就写写题解吧.不是很想打了. 22. 输入文件示例input.txt4 21 2 7 36 5 8 37 8 10 59 6 13 9 输出文件示例output.txt17 最长不相交路径. ...
- QWidget属性，函数的学习
我把所有属性重新按功能排了一遍,这样才能灌到自己脑子里,并且方便自己以后查找: -------------------- 颜色/渲染方式 -----------------------QWidget: ...
- jquery 提示插件 cluetip
jquery的 插件cluetip, 地址下载是:plugins.learningjquery.com/cluetip/demo/ 下面简单讲解下用法: 1 首先当然要放JQUERY的基本JS,和这个 ...
- jni相关
封装 jni 的 java 层 Integer.Long 对象使用时必须用 new 对象的形式,防止修改 128>x x>-128 之间缓存的对象,一定要谨记 配置 在 eclipse 环 ...
- CH Round #45 能量释放
能量释放 CH Round #45 - alan有一些陷阱 III 题目描述 alan得到一块由个能量晶体构成的矿石,对于矿石中的每一个能量晶体,如果用化学物质刺激某一个能量晶体,就能使它释放能量. ...