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. Aircrack-ng官方文档翻译[中英对照]---Aireplay-ng

    Aircrack-ng官方文档翻译---Aireplay-ng[90%] Description[简介] Aireplay-ng is used to inject frames. Aireplay- ...

  2. 简析LIVE555中的延时队列

    http://www.cnblogs.com/nightwatcher/archive/2011/04/10/2011158.html 最近在看LIVE555的源码,感觉其中的延时队列写的不错,于是就 ...

  3. VS2008编译器编译出来的文件比mingw编译的要几乎小一半

    为什么要在VS2008中使用QT静态编译呢?很简单,因为VS2008编译器编译出来的文件比mingw编译的要几乎小一半. 好了现在我们来做些准备工作,VS2008自然要安装的,然后打上SP1的补丁.然 ...

  4. linux操作Oracle导入导出dmp数据命令

    --清空该表数据 :非索引清空TRUNCATE TABLE  GE_INTERFACE_MESSAGE; --数据库导出 指定导出某个用户的所有数据 包括表 索引 序列 存储过程 函数 等exp CX ...

  5. git rebase实战

    在develop分支上rebase另外一个分支master,是将master作为本地,develop作为远端来处理的. 最后的效果是,develop分支看起来像是在master分支的最新的节点之后才进 ...

  6. Learning WCF Chapter2 WCF Contracts and Serialization

    So far I’ve talked about the standards behind it all,but in fact WCF hides most of this from the dev ...

  7. bzoj3172

    这里学习AC自动机其实对KMP和trie掌握好了之后很容易扩展成AC自动机的这里运用了一个性质由失配指针反向可以建成一棵fail树x串在y串中的出现的次数即为在fail树上以x结尾节点为根的子树中有多 ...

  8. Apache Struts 跨站脚本漏洞

    漏洞名称: Apache Struts 跨站脚本漏洞 CNNVD编号: CNNVD-201311-010 发布时间: 2013-11-04 更新时间: 2013-11-04 危害等级:    漏洞类型 ...

  9. 遍历Dataset并输出数据实例

    转自:http://www.cnblogs.com/csdm/archive/2010/02/02/1661808.html <%@ Page Language="C#" A ...

  10. Web Service学习笔记

    Web Service概述 Web Service的定义 W3C组织对其的定义如下,它是一个软件系统,为了支持跨网络的机器间相互操作交互而设计.Web Service服务通常被定义为一组模块化的API ...