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的更多相关文章

  1. D3.js & Data Visualization & SVG

    D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...

  2. d3 根据数据绘制svg

    , , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...

  3. d3创建多个svg元素

    当然也可以创建dom var svg = d3.select('#svg'); svg .slectAll('circle.bb')     //选中DOM中的所有circle.bb标签,当DOM中不 ...

  4. svg + d3

    为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...

  5. D3+svg 案例

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. [D3] 3. Scaling Basics

    d3.scale.linear() <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. d3可视化实战01：理解SVG元素特性

    一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...

  8. 【D3.V3.js系列教程】--（十五）SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  9. 使用d3.v3插件绘制出svg图

    众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的 接下来看代码吧 从后台获取到带id和父id的目录数据[json格式] var module = requestU ...

随机推荐

  1. CSS3------background-size（背景图片尺寸属性）

    background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围.那么 ...

  2. JQuery replace 替换全部

    天在做写个程序时遇到需要替换的功能,可是一开始用jquery的replace时,发现只替换到第一个.最后没办法,只好用正则表达式来例如下面   re = new RegExp("{thisc ...

  3. backbone showcase

    http://www.mhtml5.com/2012/06/5119.html http://tieba.baidu.com/p/2389371223 http://www.jdon.com/tags ...

  4. JAVA 反序列化攻击

    Java 反序列化攻击漏洞由 FoxGlove 的最近的一篇博文爆出,该漏洞可以被黑客利用向服务器上传恶意脚本,或者远程执行命令. 由于目前发现该漏洞存在于 Apache commons-collec ...

  5. POJ 2892 Tunnel Warfare || HDU 1540（树状数组+二分 || 线段树的单点更新+区间查询）

    点我看题目 题意 :N个村子连成一条线,相邻的村子都有直接的地道进行相连,不相连的都由地道间接相连,三个命令,D x,表示x村庄被摧毁,R  ,表示最后被摧毁的村庄已经重建了,Q x表示,与x直接或间 ...

  6. Android 基础知识点（持续更新）

    一.AndroidManifest 每一个安卓工程都有AndroidManifest.xml的配置文件,在所有项目中该名称都不会变.该文件是Android工程的一个全局配置文件,所有在Android中 ...

  7. 只看Delphi自带的WnAPI帮助似乎不够

    比如,MessageBox在Delphi自带帮助的参数说明中,对其第四个参数的MB_类型说明只有最常见的6种类型,这么多年搞得我天经地义的以为MessageBox就是这么简单.今天看了一位前辈写的老代 ...

  8. 《鸟哥的Linux私房菜》读书笔记二

    1.Unix的前身是由贝尔实验室(Bell lab.)的Ken Thompson利用汇编语言写成的, 后来在1971-1973年间由Dennis Ritchie以C程序语言进行改写,才称为Unix. ...

  9. easyui-lang-zh_CN.js导入后还是英文提示

    <script src="/js/easyUI1.3.3/jquery.easyui.min.js" type="text/javascript"> ...

  10. sharepoint 2010 如何使用sharepoint多媒体视频播放media webpart功能

    转:http://www.cfanz.cn/?c=article&a=read&id=40449 在sharepoint 2010中,有一个新的功能,支持在页面上播放视频.主要是通过一 ...