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. 二师兄VPN加速器

    http://www.2-vpn2.org/home.action?ic=B003CC4C47

  2. 【HDU 5909】 Tree Cutting (树形依赖型DP+点分治)

    Tree Cutting Problem Description Byteasar has a tree T with n vertices conveniently labeled with 1,2 ...

  3. ANDROID_MARS学习笔记_S02_013_Gson解析json串

    1.MainActivity.java package com.json; import java.io.IOException; import java.io.StringReader; impor ...

  4. ListView getView中放置多个item和getItemViewType的用法

    ListView 和 Adapter 的基础 工作原理: ListView 针对List中每个item,要求 adapter “给我一个视图” (getView). 一个新的视图被返回并显示 如果我们 ...

  5. CodePen避免自动刷新导致的JS卡死

    经常需要做一些前端代码的实验, 这时候我往往会用JSFiddle或CodePen. 最近用CodePen更多一些, 里面提供的选项更加丰富, 提供了各种各样的HTML/Javascript/CSS P ...

  6. 协助ScriptCase7.1做些汉化矫正工作

    之前帮助Script.net做了一部分网站的汉化工作,不过我对ScriptCase自己做的网站不满意,对其汉化网站更是不满意. ScriptCase7出来之后,比较让人头疼的就是汉化的问题,较之v6, ...

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

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

  8. bzoj1233

    首先这道题有一个很重要的贪心就是 在保证所有干草堆都能参与搭建的前提下,我们尽量使最底层的宽度小,这样搭起来的的干草堆高度一定是最高的 当我们以第i个干草堆为一层,显然最优的情况是找到一个尽可能小的j ...

  9. UVA_1025_A_Spy_in_the_Metro_(动态规划)

    描述 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...

  10. BZOJ3210: 花神的浇花集会

    3210: 花神的浇花集会 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 238  Solved: 119[Submit][Status] Descri ...