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. Linq语句与aspnetpager结合分页

    public void DataBindList()        {            List<EnDeContent> listCon = null;            in ...

  2. jquery插件的写法

    jquery插件及zepto插件,写法上有些区别. 区别点: 1.自定义事件的命名空间 jq的时间命名空间是用点“.”,而zepto是用冒号“:” 如 //jquery $(this).trigger ...

  3. 解决在HTTPS页面里嵌套HTTP页面浏览器block的问题

    问题描述: 浏览器默认是不允许在HTTPS里面引用HTTP页面的,ie下面会弹出提示框提示是否显示不安全的内容,一般都会弹出提示框,用户确认后才会继续加载,但是chrome下面直接被block掉,只在 ...

  4. 在openshift上自定义node.js的版本

    https://github.com/ramr/nodejs-custom-version-openshift 由于是线上服务器,一步一步来: 先把上面的工程拉下来,覆盖到初始化的工程里,提交,让服务 ...

  5. Myeclipse2013 SVN安装方法以及项目上传到svn服务器

    1. 打开 Myeclipse 工具栏下的Help下的Install from Site 2.打开后弹出窗口, 并点击Add标签,如下图: 3.现在是最重要的一步,填写相关信息. 在对话框Name输入 ...

  6. "NetworkError: 500 Internal Server Error - http://develop.console.aliyun.sinopec.com/ots/ots_queryOtsList.action?state=0"

    项目明明开始好好的,报的这个错,错误提示也很少,啥信息都没有,只是明白是服务器报了500,知道是服务器内部错误,但是却没法找不到问题所在.后来突然想到把下面报错的action直接在浏览器运行: htt ...

  7. Android 自定义组件随着手指自动画圆

    首先自定义一个View子类: package com.example.androidtest0.myView; import android.content.Context; import andro ...

  8. pcDuino 刷系统-卡刷

    准备: pcduino : 点此购买 支持HDMI的显示器:点此购买  或参考无显示器刷机与使用.至少1张4G microSD卡,如果内存卡不大,可以用内存卡刷内核,用u盘刷系统 背景:本教程中使用的 ...

  9. ubuntu12.04 mysql服务器乱码问题的解决办法

    网上方法太杂乱,有些甚至很复杂,其实ubuntu下只需要修改一个配置文件即可. sudo vi /etc/mysql/my.cnf 在[client]下加入 default-character-set ...

  10. Asp.net--Ajax前后台数据交互

    转自:http://www.cnblogs.com/guolebin7/archive/2011/02/22/1961737.html 代码由前后台两部分组成: 前台:(新建一个Default.asp ...