[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 ...
随机推荐
- 4069: [Apio2015]巴厘岛的雕塑
Description 印尼巴厘岛的公路上有许多的雕塑,我们来关注它的一条主干道. 在这条主干道上一共有 N 座雕塑,为方便起见,我们把这些雕塑从 1 到 N 连续地进行标号,其中第 i 座雕塑的年龄 ...
- 基于jsp+servlet图书管理系统之后台用户信息查询操作
上一篇的博客写的是插入操作,且附有源码和数据库,这篇博客写的是查询操作,附有从头至尾写的代码(详细的注释)和数据库! 此次查询操作的源码和数据库:http://download.csdn.net/de ...
- 毕向东_Java基础视频教程第19天_IO流（06~10）
第19天-06-IO流(装饰设计模式) 装饰设计模式: 当想要对已有的对象进行功能增强时, 可以定义类,将已有对象传入,基于已有的功能,并提供加强功能.那么这个自定义的类称为装饰类. 装饰类通常会通过 ...
- Uva 10288 Coupons
Description Coupons in cereal boxes are numbered \(1\) to \(n\), and a set of one of each is require ...
- ARM内核全解析，从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57
转自: ARM内核全解析,从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57 前不久ARM正式宣布推出新款ARMv8架构的Cortex-A50处理器系列 ...
- CAS单点登录配置[4]：客户端配置
本节介绍一下客户端如何配置,客户端配置没有服务端那么复杂... 客户端Tomcat配置 1 首先确认证书文件已经拷贝到Tomcat的目录下,我们新建两个客户端的web应用,分别命名为Client1,C ...
- poj1436 Horizontally Visible Segments
这是一个区间更新的题目,先将区间放大两倍,至于为什么要放大可以这样解释,按照从左到右有4个区间,y值是[1,5],[1,2],[3,4],[1,4]如果不放大的话,查询[1,4]区间和前面区间的”可见 ...
- 在老项目中使用Gradle：更改默认目录结构
apply plugin: 'war' sourceCompatibility = 1.5 version = "1.0" //中央仓库 repositories { mavenC ...
- 如何用Python从本地将一个文件备份到Google Drive
1.要有一个Google App账号: 这个可以上网上去申请,申请地址为:https://developers.google.com/appengine/?hl=zh-cn 2.创建一个Google ...
- 利用CMake生成动态或静态链接库工程
install解释: TARGETS版本的install命令 install(TARGETS targets... [EXPORT <export-name>] [[ARCHIVE|LIB ...