《D3 API详解（全彩）》内容简介

D3是目前流行的数据可视化工具。它是一个基于数据操作文档的JavaScript函数库，因为其优雅灵活的语言风格，生动有趣的交互功能，花哨酷炫的表现力，受到越来越多的人关注和喜爱。
《D3 API详解（全彩）》基于官方API文档，在尽量保留原文含义的基础上，对部分内容进行了删减和增补，几乎为每个函数都添加了浅显直观的案例。《D3 API详解（全彩）》涵盖了API大部分内容，包括核心函数中的选择器、过渡、数组、数学、数据请求、格式化、本地化；3类9种比例尺；D3对SVG绘图技术的封装，如SVG元素、多种路径生成器、数轴、刷子等；时间函数；12种布局，如捆、弦、树、簇、包、分区、矩形树、力、直方图、堆叠等；地理函数，如投影、流、地理路径、经纬网等；还有几何图形，像四叉树、凸包、多边形、泰森多边形等；以及交互行为中的拖动和缩放。
《D3 API详解（全彩）》适合所有想使用D3实现数据可视化方案的人使用。读者朋友可以将《D3 API详解（全彩）》作为入门参考，也可以作为速查手册。
张天旭，CSDN博客技术专家，写有D3方面专栏，累计阅读量达到17万。其博客“以数为据，视不可挡”地址为http://blog.csdn.net/tianxuzhang。

作品目录

前言
致谢
第1章：核心（Core）
1.1、选择
1.1.1、d3.select(selector)
1.1.2、d3.select(node)
1.1.3、d3.selectAll(selector)
1.1.4、d3.selectAll(nodes)
1.1.5、selection.attr(name[,value])
1.1.6、selection.classed(name[,value])
1.1.7、selection.style(name[,value[,priority]])
1.1.8、selection.property(name[,value])
1.1.9、selection.text([value])
1.1.10、selection.html([value])
1.1.11、selection.append(name)
1.1.12、selection.insert(name[,before])
1.1.13、selection.remove()
1.1.14、selection.data([values[,key]])
1.1.15、selection.enter()
1.1.16、selection.exit()
1.1.17、selection.filter(selector)
1.1.18、selection.datum([value])
1.1.19、selection.sort(comparator)
1.1.20、selection.on(type[,listener[,capture]])
1.1.21、d3.event
1.1.22、d3.mouse(container)
1.1.23、selection.transition()
1.1.24、selection.select(selector)
1.1.25、selection.selectAll(selector)
1.1.26、selection.each(function)
1.1.27、selection.call(function[,arguments…])
1.1.28、selection.empty()
1.1.29、selection.node()
1.1.30、selection.size()
1.2、过渡
1.2.1、transition.delay([delay])
1.2.2、transition.duration([duration])
1.2.3、transition.ease([value[,arguments]])
1.2.4、transition.attr(name,value)
1.2.5、transition.attrTween(name,tween)
1.2.6、transition.style(name,value[,priority])
1.2.7、transition.styleTween(name,tween[,priority])
1.2.8、transition.text(value)
1.2.9、transition.tween(name,factory)
1.2.10、transition.remove()
1.2.11、transition.select(selector)
1.2.12、transition.selectAll(selector)
1.2.13、transition.filter(selector)
1.2.14、transition.transition()
1.2.15、transition.each([type,]listener)
1.2.16、transition.call(function[,arguments…])
1.2.17、transition.empty()
1.2.18、transition.node()
1.2.19、transition.size()
1.2.20、d3.ease(type[,arguments…])
1.2.21、ease(t)
1.2.22、d3.timer(function[,delay[,time]])
1.2.23、d3.interpolate(a,b)
1.2.24、interpolate(t)
1.2.25、d3.interpolateNumber(a,b)
1.2.26、d3.interpolateRound(a,b)
1.2.27、d3.interpolateString(a,b)
1.2.28、d3.interpolateRgb(a,b)
1.2.29、d3.interpolateHsl(a,b)
1.2.30、d3.interpolateLab(a,b)
1.2.31、d3.interpolateHcl(a,b)
1.2.32、d3.interpolateArray(a,b)
1.2.33、d3.interpolateObject(a,b)
1.2.34、d3.interpolateTransform(a,b)
1.2.35、d3.interpolateZoom(a,b)
1.3、数组
1.3.1、d3.ascending(a,b)
1.3.2、d3.descending(a,b)
1.3.3、d3.min(array[,accessor])
1.3.4、d3.max(array[,accessor])
1.3.5、d3.extent(array[,accessor])
1.3.6、d3.sum(array[,accessor])
1.3.7、d3.mean(array[,accessor])
1.3.8、d3.median(array[,accessor])
1.3.9、d3.quantile(numbers,p)
1.3.10、d3.bisectLeft(array,x[,lo[,hi]])
1.3.11、d3.bisectRight(array,x[,lo[,hi]])
1.3.12、d3.bisect(array,x[,lo[,hi]])
1.3.13、d3.bisector(accessor)
1.3.14、d3.shuffle(array)
1.3.15、d3.keys(object)
1.3.16、d3.values(object)
1.3.17、d3.entries(object)
1.3.18、d3.map([object])
1.3.19、map.has(key)
1.3.20、map.get(key)
1.3.21、map.set(key,value)
1.3.22、map.remove(key)
1.3.23、map.keys()
1.3.24、map.values()
1.3.25、map.entries()
1.3.26、map.forEach(function)
1.3.27、map.empty()
1.3.28、map.size()
1.3.29、d3.set([array])
1.3.30、set.has(value)
1.3.31、set.add(value)
1.3.32、set.remove(value)
1.3.33、set.values()
1.3.34、set.forEach(function)
1.3.35、set.empty()
1.3.36、set.size()
1.3.37、d3.merge(arrays)
1.3.38、d3.range([start,]stop[,step])
1.3.39、d3.permute(array,indexes)
1.3.40、d3.zip(arrays…)
1.3.41、d3.transpose(matrix)
1.3.42、d3.pairs(array)
1.3.43、d3.nest()
1.3.44、nest.key(function)
1.3.45、nest.sortKeys(comparator)
1.3.46、nest.sortValues(comparator)
1.3.47、nest.rollup(function)
1.3.48、nest.map(array[,mapType])
1.3.49、nest.entries(array)
1.4、数学
1.4.1、d3.random.normal([mean,[deviation]])
1.4.2、d3.random.logNormal([mean,[deviation]])
1.4.3、d3.random.bates(count)
1.4.4、d3.random.irwinHall(count)
1.4.5、d3.transform(string)
1.4.6、transform.rotate
1.4.7、transform.translate
1.4.8、transform.skew
1.4.9、transform.scale
1.4.10、transform.toString
1.5、请求
1.5.1、d3.xhr(url[,mimeType][,callback])
1.5.2、xhr.header(name[,value])
1.5.3、xhr.mimeType([type])
1.5.4、xhr.responseType(type)
1.5.5、xhr.response(value)
1.5.6、xhr.get([callback])
1.5.7、xhr.post([data][,callback])
1.5.8、xhr.send(method[,data][,callback])
1.5.9、xhr.abort()
1.5.10、xhr.on(type[,listener])
1.5.11、d3.text(url[,mimeType][,callback])
1.5.12、d3.json(url[,callback])
1.5.13、d3.xml(url[,mimeType][,callback])
1.5.14、d3.html(url[,callback])
1.5.15、d3.csv(url[,accessor][,callback])
1.5.16、d3.tsv(url[,accessor][,callback])
1.6、格式化
1.6.1、d3.format(specifier)
1.6.2、d3.formatPrefix(value[,precision])
1.6.3、d3.round(x[,n])
1.6.4、d3.requote(string)
1.7、本地化
1.7.1、d3.locale(definition)
1.7.2、locale.numberFormat(specifier)
1.7.3、locale.timeFormat(specifier)
1.7.4、locale.timeFormat.utc(specifier)
第2章：比例尺（Scales）
2.1、线性比例尺
2.1.1、d3.scale.linear()
2.1.2、linear(x)
2.1.3、linear.invert(y)
2.1.4、linear.domain([numbers])
2.1.5、linear.range([values])
2.1.6、linear.rangeRound(values)
2.1.7、linear.interpolate([factory])
2.1.8、linear.clamp([boolean])
2.1.9、linear.nice([count])
2.1.10、linear.ticks([count])
2.1.11、linear.tickFormat(count,[format])
2.1.12、linear.copy()
2.2、恒等比例尺
2.2.1、d3.scale.identity()
2.2.2、identity.invert(x)
2.2.3、identity.invert(y)
2.2.4、identity.domain([numbers])
2.2.5、identity.range([numbers])
2.2.6、identity.ticks([count])
2.2.7、identity.tickFormat(count,[format])
2.2.8、identity.copy()
2.3、乘方比例尺
2.3.1、d3.scale.sqrt()
2.3.2、d3.scale.pow()
2.3.3、pow(x)
2.3.4、pow.invert(y)
2.3.5、pow.domain([numbers])
2.3.6、pow.range([values])
2.3.7、pow.rangeRound(values)
2.3.8、pow.exponent([k])
2.3.9、pow.interpolate([factory])
2.3.10、pow.clamp([boolean])
2.3.11、pow.nice([m])
2.3.12、pow.ticks([count])
2.3.13、pow.tickFormat([count,[format]])
2.3.14、pow.copy()
2.4、对数比例尺
2.4.1、d3.scale.log()
2.4.2、log(x)
2.4.3、log.invert(y)
2.4.4、log.domain([numbers])
2.4.5、log.range([values])
2.4.6、log.rangeRound(values)
2.4.7、log.interpolate([factory])
2.4.8、log.clamp([boolean])
2.4.9、log.nice()
2.4.10、log.ticks()
2.4.11、log.tickFormat([count,[format]])
2.4.12、log.copy()
2.5、量化比例尺
2.5.1、d3.scale.quantize()
2.5.2、quantize(x)
2.5.3、quantize.invertExtent(y)
2.5.4、quantize.domain([numbers])
2.5.5、quantize.range([values])
2.5.6、quantize.copy()
2.6、分位数比例尺
2.6.1、d3.scale.quantile()
2.6.2、quantile(x)
2.6.3、quantile.invertExtent(y)
2.6.4、quantile.domain([numbers])
2.6.5、quantile.range([values])
2.6.6、quantile.quantiles()
2.6.7、quantile.copy()
2.7、临界值比例尺
2.7.1、d3.scale.threshold()
2.7.2、threshold(x)
2.7.3、threshold.invertExtent(y)
2.7.4、threshold.domain([domain])
2.7.5、threshold.range([values])
2.7.6、threshold.copy()
2.8、序数比例尺
2.8.1、d3.scale.ordinal()
2.8.2、ordinal(x)
2.8.3、ordinal.domain([values])
2.8.4、ordinal.range([values])
2.8.5、ordinal.rangePoints(interval[,padding])
2.8.6、ordinal.rangeBands(interval[,padding[,outerPadding]])
2.8.7、ordinal.rangeRoundBands(interval[,padding[,outerPadding]])
2.8.8、ordinal.rangeBand()
2.8.9、ordinal.rangeExtent()
2.8.10、ordinal.copy()
2.8.11、d3.scale.category10()
2.8.12、d3.scale.category20()
2.8.13、d3.scale.category20b()
2.8.14、d3.scale.category20c()
2.9、时间比例尺
2.9.1、d3.time.scale()
2.9.2、d3.time.scale.utc()
2.9.3、scale(x)
2.9.4、scale.invert(y)
2.9.5、scale.domain([dates])
2.9.6、scale.nice([interval[,step]])
2.9.7、scale.nice([count])
2.9.8、scale.range([values])
2.9.9、scale.rangeRound([values])
2.9.10、scale.interpolate([factory])
2.9.11、scale.clamp([boolean])
2.9.12、scale.ticks([interval[,step]])
2.9.13、scale.ticks([count])
2.9.14、scale.copy()
第3章：可缩放矢量图形（SVG）
3.1、SVG元素
3.1.1、svg:rectx="0"y="0"width="0"height="0"rx="0"ry="0"
3.1.2、svg:circlecx="0"cy="0"r="0"
3.1.3、svg:ellipsecx="0"cy="0"rx="0"ry="0"
3.1.4、svg:linex1="0"y1="0"x2="0"y2="0"
3.1.5、svg:polylinepoints=""
3.1.6、svg:polygonpoints=""
3.1.7、svg:textx="0"y="0"dx="0"dy="0"text-anchor="start"
3.1.8、svg:pathd=""transform=""
3.2、线生成器
3.2.1、d3.svg.line()
3.2.2、line(data)
3.2.3、line.x([x])和line.y([y])
3.2.4、line.interpolate([interpolate])
3.2.5、line.tension([tension])
3.2.6、line.defined([defined])
3.3、径向线生成器
3.3.1、d3.svg.line.radial()
3.3.2、line(data)
3.3.3、line.radius([radius])
3.3.4、line.angle([angle])
3.3.5、line.interpolate([interpolate])
3.3.6、line.tension([tension])
3.3.7、line.defined([defined])
3.4、面积生成器
3.4.1、d3.svg.area()
3.4.2、area(data)
3.4.3、area.x([x])
3.4.4、area.y0([y0])
3.4.5、area.y1([y1])
3.4.6、area.y，area.x0，area.x1、3.4.7、area.interpolate([interpolate])
3.4.8、area.tension([tension])
3.4.9、area.defined([defined])
3.5、径向面积生成器
3.5.1、d3.svg.area.radial()
3.5.2、area(data)
3.5.3、area.outerRadius([radius])
3.5.4、area.innerRadius([radius])
3.5.5、area.angle([angle])
3.6、弧生成器
3.6.1、d3.svg.arc()
3.6.2、arc(datum[,index])
3.6.3、arc.innerRadius([radius])
3.6.4、arc.outerRadius([radius])
3.6.5、arc.startAngle([angle])
3.6.6、arc.endAngle([angle])
3.6.7、arc.centroid(arguments…)
3.7、符号生成器
3.7.1、d3.svg.symbol()
3.7.2、symbol.type([type])
3.7.3、symbol.size([size])
3.7.4、d3.svg.symbolTypes
3.8、弦生成器
3.8.1、d3.svg.chord()
3.8.2、chord(datum[,index])
3.8.3、chord.source([source])
3.8.4、chord.target([target])
3.8.5、chord.startAngle([angle])
3.8.6、chord.endAngle([angle])
3.8.7、chord.radius([radius])
3.9、对角线生成器
3.9.1、d3.svg.diagonal()
3.9.2、diagonal(datum[,index])
3.9.3、diagonal.source([source])
3.9.4、diagonal.target([target])
3.9.5、diagonal.projection([projection])
3.9.6、d3.svg.diagonal.radial()
3.10、轴
3.10.1、d3.svg.axis()
3.10.2、axis(selection)
3.10.3、axis.scale([scale])
3.10.4、axis.orient([orientation])
3.10.5、axis.ticks([arguments…])
3.10.6、axis.tickValues([values])
3.10.7、axis.tickSize([inner,outer])
3.10.8、axis.innerTickSize([size])
3.10.9、axis.outerTickSize([size])
3.10.10、axis.tickPadding([padding])
3.10.11、axis.tickFormat([format])
3.11、刷子
3.11.1、d3.svg.brush()
3.11.2、brush(selection)
3.11.3、brush.x([scale])
3.11.4、brush.y([scale])
3.11.5、brush.extent([values])
3.11.6、brush.clamp([clamp])
3.11.7、brush.clear()
3.11.8、brush.empty()
3.11.9、brush.on(type[,listener])
第4章：时间（Time）
4.1、时间格式
4.1.1、d3.time.format(specifier)
4.1.2、format(date)
4.1.3、format.parse(string)
4.1.4、d3.time.format.multi(formats)
4.1.5、d3.time.format.utc(specifier)
4.1.6、d3.time.format.iso
4.2、时间间隔
4.2.1、d3.time.interval
4.2.2、interval(date)
4.2.3、interval.floor(date)
4.2.4、interval.round(date)
4.2.5、interval.ceil(date)
4.2.6、interval.range(start,stop[,step])
4.2.7、interval.offset(date,step)
4.2.8、interval.utc
4.3、计数
第5章：布局（Layouts）
5.1、捆绑布局
5.1.1、d3.layout.bundle()
5.1.2、bundle(links)
5.2、弦布局
5.2.1、d3.layout.chord()
5.2.2、chord.matrix([matrix])
5.2.3、chord.padding([padding])
5.2.4、chord.sortGroups([comparator])
5.2.5、chord.sortSubgroups([comparator])
5.2.6、chord.sortChords([comparator])
5.2.7、chord.chords()
5.2.8、chord.groups()
5.3、簇布局
5.3.1、d3.layout.cluster()
5.3.2、cluster(root)
5.3.3、cluster.nodes(root)
5.3.4、cluster.links(nodes)
5.3.5、cluster.children([children])
5.3.6、cluster.sort([comparator])
5.3.7、cluster.separation([separation])
5.3.8、cluster.size([size])
5.3.9、cluster.nodeSize([nodeSize])
5.4、力布局
5.4.1、d3.layout.force()
5.4.2、force.size([size])
5.4.3、force.linkDistance([distance])
5.4.4、force.linkStrength([strength])
5.4.5、force.friction([friction])
5.4.6、force.charge([charge])
5.4.7、force.chargeDistance([distance])
5.4.8、force.theta([theta])
5.4.9、force.gravity([gravity])
5.4.10、force.nodes([nodes])
5.4.11、force.links([links])
5.4.12、force.start()
5.4.13、force.alpha([value])
5.4.14、force.resume()
5.4.15、force.stop()
5.4.16、force.tick()
5.4.17、force.on(type,listener)
5.4.18、force.drag()
5.5、层次布局
5.6、直方图布局
5.6.1、d3.layout.histogram()
5.6.2、histogram(values[,index])
5.6.3、histogram.value([accessor])
5.6.4、histogram.range([range])
5.6.5、histogram.bins()
5.6.6、histogram.bins(count)
5.6.7、histogram.bins(thresholds)
5.6.8、histogram.bins(function)
5.6.9、histogram.frequency([frequency])
5.7、包布局
5.7.1、d3.layout.pack()
5.7.2、pack(root)
5.7.3、pack.nodes(root)
5.7.4、pack.links(nodes)
5.7.5、pack.children([children])
5.7.6、pack.sort([comparator])
5.7.7、pack.value([value])
5.7.8、pack.size([size])
5.7.9、pack.radius([radius])
5.7.10、pack.padding([padding])
5.8、分区布局
5.8.1、d3.layout.partition()
5.8.2、partition(root)
5.8.3、partition.nodes(root)
5.8.4、partition.links(nodes)
5.8.5、partition.children([children])
5.8.6、partition.sort([comparator])
5.8.7、partition.value([value])
5.8.8、partition.size([size])
5.9、饼布局
5.9.1、d3.layout.pie()
5.9.2、pie(values[,index])
5.9.3、pie.value([accessor])
5.9.4、pie.sort([comparator])
5.9.5、pie.startAngle([angle])
5.9.6、pie.endAngle([angle])
5.10、堆叠布局
5.10.1、d3.layout.stack()
5.10.2、stack(layers[,index])
5.10.3、stack.values([accessor])
5.10.4、stack.offset([offset])
5.10.5、stack.order([order])
5.10.6、stack.y([accessor])
5.10.7、stack.out([setter])
5.11、树布局
5.11.1、d3.layout.tree()
5.11.2、tree(root)
5.11.3、tree.nodes(root)
5.11.4、tree.links(nodes)
5.11.5、tree.children([children])
5.11.6、tree.separation([separation])
5.11.7、tree.size([size])
5.11.8、tree.nodeSize([nodeSize])
5.11.9、tree.sort([comparator])
5.12、矩形树布局
5.12.1、d3.layout.treemap()
5.12.2、treemap(root)
5.12.3、treemap.nodes(root)
5.12.4、treemap.links(nodes)
5.12.5、treemap.children([children])
5.12.6、treemap.sort([comparator])
5.12.7、treemap.value([value])
5.12.8、treemap.size([size])
5.12.9、treemap.padding([padding])
5.12.10、treemap.round([round])
5.12.11、treemap.sticky([sticky])
5.12.12、treemap.mode([mode])
第6章：地理（Geo）
6.1、地理路径
6.1.1、d3.geo.path()
6.1.2、path(feature[,index])
6.1.3、path.projection([projection])
6.1.4、path.context([context])
6.1.5、path.centroid(feature)
6.1.6、path.area(feature)
6.1.7、path.bounds(feature)
6.2、经纬网生成器
6.2.1、d3.geo.graticule
6.2.2、graticule()
6.2.3、graticule.lines()
6.2.4、graticule.outline()
6.2.5、graticule.extent(extent)
6.2.6、graticule.majorExtent(extent)
6.2.7、graticule.minorExtent(extent)
6.2.8、graticule.step(step)
6.2.9、graticule.majorStep(step)
6.2.10、graticule.minorStep(step)
6.3、球面数学运算
6.3.1、d3.geo.area(feature)
6.3.2、d3.geo.centroid(feature)
6.3.3、d3.geo.bounds(feature)
6.3.4、d3.geo.distance(a,b)
6.3.5、d3.geo.length(feature)
6.3.6、d3.geo.interpolate(a,b)
6.4、标准抽象投影
6.4.1、d3.geo.projection(raw)
6.4.2、projection(location)
6.4.3、projection.invert(point)
6.4.4、projection.rotate([rotation])
6.4.5、projection.center([location])
6.4.6、projection.translate([point])
6.4.7、projection.scale([scale])
6.4.8、projection.clipAngle(angle)
6.4.9、projection.clipExtent(extent)
6.5、标准投影
6.5.1、d3.geo.azimuthalEqualArea()
6.5.2、d3.geo.azimuthalEquidistant()
6.5.3、d3.geo.conicConformal()
6.5.4、conicConformal.parallels([parallels])
6.5.5、d3.geo.conicEqualArea()
6.5.6、conicEqualArea.parallels([parallels])
6.5.7、d3.geo.conicEquidistant()
6.5.8、conicEquidistant.parallels([parallels])
6.5.9、d3.geo.equirectangular()
6.5.10、d3.geo.gnomonic()
6.5.11、d3.geo.mercator()
6.5.12、d3.geo.orthographic()
6.5.13、d3.geo.stereographic()
6.5.14、d3.geo.transverseMercator()
6.6、流
6.6.1、d3.geo.stream(object,listener)
6.6.2、listener.point(x,y[,z])
6.6.3、listener.lineStart()
6.6.4、listener.lineEnd()
6.6.5、listener.polygonStart()
6.6.6、listener.polygonEnd()
6.6.7、listener.sphere()
6.6.8、d3.geo.transform(methods)
6.6.9、transform.stream(listener)
6.6.10、d3.geo.clipExtent()
6.6.11、clipExtent.extent([extent])
第7章：几何（Geometry）
7.1、四叉树
7.1.1、d3.geom.quadtree()
7.1.2、quadtree(points)
7.1.3、root.add(point)
7.1.4、root.visit(callback)
7.1.5、quadtree.x([x])
7.1.6、quadtree.y([y])
7.2、凸包
7.2.1、d3.geom.hull()
7.2.2、hull(vertices)
7.2.3、hull.x([x])
7.2.4、hull.y([y])
7.3、多边形
7.3.1、d3.geom.polygon(vertices)
7.3.2、polygon.area()
7.3.3、polygon.centroid()
7.3.4、polygon.clip(subject)
7.4、泰森多边形
7.4.1、d3.geom.voronoi()
7.4.2、voronoi(data)
7.4.3、voronoi.x([x])
7.4.4、voronoi.y([y])
7.4.5、voronoi.clipExtent([extent])
7.4.6、voronoi.links(data)
7.4.7、voronoi.triangles(data)
第8章：行为（Behaviors）
8.1、拖曳
8.1.1、d3.behavior.drag()
8.1.2、drag.on(type[,listener])
8.1.3、drag.origin([origin])
8.2、缩放
8.2.1、d3.behavior.zoom()
8.2.2、zoom(selection)
8.2.3、zoom.translate([translate])
8.2.4、zoom.scale([scale])
8.2.5、zoom.scaleExtent([extent])
8.2.6、zoom.center([center])
8.2.7、zoom.size([size])
8.2.8、zoom.x([x])
8.2.9、zoom.y([y])
8.2.10、zoom.on(type,listener)
本书参考资料