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. 使用Runnable接口创建线程-3

    实现Runnable接口的类必须使用Thread类的实例才能创建线程.通过Runnable接口创建线程分为两步: 1. 将实现Runnable接口的类实例化. 2. 建立一个Thread对象,并将第一 ...

  2. forward:hello 与 redirect:hello的区别

    对于某些Controller的处理方法,当返回值为String类型时,返回的结果中可能含有forward或redirect前缀: 如: @Controller @RequestMapping(&quo ...

  3. Java 声明和访问控制（一） 数组的声明 private可以修饰类吗

    数组的声明: int []a[] = new int[4][];//是正确的 int[] array = new int[2]{1,2};//是错误的 数组的长度是不可改变的,不能通过任何方式改变大小 ...

  4. leetcode面试准备:Valid Anagram

    leetcode面试准备:Valid Anagram 1 题目 Given two strings s and t, write a function to determine if t is an ...

  5. JMS的作用

    JMS就是生产者与消费者模式.消费者负责消费生产者产生的消息.通过JMS可以做后台的异步操作,应用到具体工作中的话,有用它来发内部消息的.发邮件的.发短信的,做大操作时在后台做异步操作的. Java ...

  6. 【Python Network】使用DOM生成XML

    单纯的为DOM树添加结点. #!/usr/bin/env python # Generating XML with DOM - Chapter 8 - domgensample.py from xml ...

  7. “net.tcp://localhost:9000/ObtainData”处带有协定“"IObtainData"”的 ChannelDispatcher 无法打开其 IchannelListener。

    http://stackoverflow.com/questions/1252791/how-to-solve-the-channeldispatcher-is-unable-to-open-its- ...

  8. hadoop2.2编程: 重写comparactor

    要点: 类型比较在hadoop的mapreduce中非常重要,主要用来比较keys; hadoop中的RawComparator<T>接口继承自java的comparator, 主要用来比 ...

  9. 漫谈CSS的渲染效率

    总结了部分所学.所听.所看.所问的一些CSS写作经验,书写高效的CSS - 漫谈CSS的渲染效率,它们与渲染效率及所占用消耗的资源有一定的关 联.部分为自己理解所写,不排除会有错漏,欢迎提供更好的意见 ...

  10. asp.net中的<%%>的几种形式的用法

    转自:http://blog.csdn.net/wang379275614/article/details/9625911 在asp.net中经常出现包含这种形式<%%>的html代码,总 ...