d3.js画圆弧和圆的坐标、弧长计算方法

2023-03-22 19:36:02JavaScript010

d3.js画圆弧和圆的坐标、弧长计算方法,第1张

svg路径画圆的特性：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)。

rx，ry: 是椭圆的两个半轴的长度。

x-axis-rotation: 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。

large-arc-flag: 是标记绘制大弧(1)还是小弧(0)部分。

sweep-flag: 是标记向顺时针(1)还是逆时针(0)方向绘制。

x，y: 是圆弧终点的坐标。

已知两点和半径求弧路径。

已知圆上两点和半径求弧长。

已知圆上的y轴半径和圆心求相交的x轴坐标。

已知圆上的x轴半径和圆心求y轴坐标。

D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。

D3的特点

允许绑定任意数据到DOM，将数据驱动转换应用到Document中。

不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。

支持SVG，在Web页面上渲染毫无压力。

回到顶部

D3的使用方法

关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。

index.html代码：

<!DOCTYPE html>

<style>

svg {

font: 10px sans-serif

}

.y.axis path {

display: none

}

.y.axis line {

stroke: #fff

stroke-opacity: .2

shape-rendering: crispEdges

}

.y.axis .zero line {

stroke: #000

stroke-opacity: 1

}

.title {

font: 300 78px Helvetica Neue

fill: #666

}

.birthyear,

.age {

text-anchor: middle

}

.birthyear {

fill: #fff

}

rect {

fill-opacity: .6

fill: #e377c2

}

rect:first-child {

fill: #1f77b4

}

</style>

<body>

var margin = {top: 20, right: 40, bottom: 30, left: 20},

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom,

barWidth = Math.floor(width / 19) - 1

var x = d3.scale.linear()

.range([barWidth / 2, width - barWidth / 2])

var y = d3.scale.linear()

.range([height, 0])

var yAxis = d3.svg.axis()

.scale(y)

.orient("right")

.tickSize(-width)

.tickFormat(function(d) { return Math.round(d / 1e6) + "M" })

// An SVG element with a bottom-right origin.

var svg = d3.select("body").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// A sliding container to hold the bars by birthyear.

var birthyears = svg.append("g")

.attr("class", "birthyears")

// A label for the current year.

var title = svg.append("text")

.attr("class", "title")

.attr("dy", ".71em")

.text(2000)

d3.csv("population.csv", function(error, data) {

// Convert strings to numbers.

data.forEach(function(d) {

d.people = +d.people

d.year = +d.year

d.age = +d.age

})

// Compute the extent of the data set in age and years.

var age1 = d3.max(data, function(d) { return d.age }),

year0 = d3.min(data, function(d) { return d.year }),

year1 = d3.max(data, function(d) { return d.year }),

year = year1

// Update the scale domains.

x.domain([year1 - age1, year1])

y.domain([0, d3.max(data, function(d) { return d.people })])

// Produce a map from year and birthyear to [male, female].

data = d3.nest()

.key(function(d) { return d.year })

.key(function(d) { return d.year - d.age })

.rollup(function(v) { return v.map(function(d) { return d.people }) })

.map(data)

// Add an axis to show the population values.

svg.append("g")

.attr("class", "y axis")

.attr("transform", "translate(" + width + ",0)")

.call(yAxis)

.selectAll("g")

.filter(function(value) { return !value })

.classed("zero", true)

// Add labeled rects for each birthyear (so that no enter or exit is required).

var birthyear = birthyears.selectAll(".birthyear")

.data(d3.range(year0 - age1, year1 + 1, 5))

.enter().append("g")

.attr("class", "birthyear")

.attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)" })

birthyear.selectAll("rect")

.data(function(birthyear) { return data[year][birthyear] || [0, 0] })

.enter().append("rect")

.attr("x", -barWidth / 2)

.attr("width", barWidth)

.attr("y", y)

.attr("height", function(value) { return height - y(value) })

// Add labels to show birthyear.

birthyear.append("text")

.attr("y", height - 4)

.text(function(birthyear) { return birthyear })

// Add labels to show age (separate not animated).

svg.selectAll(".age")

.data(d3.range(0, age1 + 1, 5))

.enter().append("text")

.attr("class", "age")

.attr("x", function(age) { return x(year - age) })

.attr("y", height + 4)

.attr("dy", ".71em")

.text(function(age) { return age })

// Allow the arrow keys to change the displayed year.

window.focus()

d3.select(window).on("keydown", function() {

switch (d3.event.keyCode) {

case 37: year = Math.max(year0, year - 10) break

case 39: year = Math.min(year1, year + 10) break

}

update()

})

function update() {

if (!(year in data)) return

title.text(year)

birthyears.transition()

.duration(750)

.attr("transform", "translate(" + (x(year1) - x(year)) + ",0)")

birthyear.selectAll("rect")

.data(function(birthyear) { return data[year][birthyear] || [0, 0] })

.transition()

.duration(750)

.attr("y", y)

.attr("height", function(value) { return height - y(value) })

}

})

通常画可视化图的工具很多，除了d3.js，还有echarts.js等。

通过比较，看起来ECharts.js更容易上手，但是因为我需要更灵活更符合个性定制化的工具，所以选了d3.js。

经过一段时间的磨炼，从折线图、闭合路径图、蜂窝图、直角坐标、极坐标都玩了个遍。

那这次就来个3D的吧，其实d3.js做3D的图不是很容易的，有更好的选择，但我认准了d3.js，一条道走到黑吧(想起高中数学老师说的话，当你解题解到一半时发现有更好的办法，不，赶紧忘掉，接着当前的方法，只要方法没错，总能解出来，也许会傻一点，但是一定会有正确的结果；如果中途放弃，也许另一个方法更快更聪明，但也许更慢或者错误，不算到最后，谁都不知道谁最准确。我选择相信他的话，于是。。。我成了程序员O(∩_∩)O哈哈~)。

有人鄙视拿来主义，要我说，你能拿来那是你的本事，如果还能在此基础上做出更好的东西，何乐而不为呢？

每个人时间有限，每个项目也有deadline，不可能从每一个螺丝钉怎么拧开始学起，不然怎么会有那么多五花八门的框架，会有封装好的组件和接口，正因为有人已经做了前期工作，所以时间才能省下来做更有意义的事情，这就是站在巨人肩上的道理所在吧。

但是我们得明白拿来的东西的原理，以及出了问题该怎么解决的能力。然后才能做出更厉害的东西。

首选当然是官网的例子咯，目测搜了一圈，终于找到一个3D Donut。就是你了，我的巨人。

把该地址的donut3d.js拷贝下来作为画3D饼图的基础js，待会会在此基础上修改，以满足我的要求(长的像齿轮的要求)。

那我们就一睹她的芳容吧。

如果这张图符合你的要求，那就打住，不用往下看了，直接看官网例子即可。

注意d3版本的问题，如果你用d3.v3.js，恭喜你，啥也不用改，直接拿来用；如果你用d3.v5.js，那稍微改下方法，比如d3.v5.js没有d3.layout，所以d3.layout.pie改成d3.pie。我就是那个不幸的人，用的d3.v5.js。没关系，改起来很快，运行下，看哪里有错，就改哪里，O(∩_∩)O哈哈~so easy！

还是先上个我已经改好之后的3D饼图(齿轮图)吧，方便说明。

其实显示的时候是个动态的，一节一节显示出齿轮的。

背景是黑乎乎的，据说现在流行黑乎乎的背景，显得有科技感，技术也要赶时髦啊，我这么fashion的人，做出来的东西也要fashion啊O(∩_∩)O~

从以上分析可以看出，难啃的骨头在第4点。这个图断断续续花了3天时间才搞定，为啥是断断续续呢，因为还有其他工作要做嘛，你懂得。

那就按顺序一条一条实现，总有一天我们的愿望都能实现！

首先新建svg及设置宽高。

我是切分成了32个小齿轮(包含透明的)，如果你想分的更细，可以分成40或50个，只要你觉得好看就行。

既然要分成32个小立体快，那数据也要切分成32个。

通过以上处理，把数据整合成可以生成齿轮的完整数据dataset。

如果不增加左侧面和右侧面，那调用donut3d.js的draw方法后，会生成什么样的图形呢？

请各位仔细看。

是不是有种被掏空的感觉？如果你觉得这样挺好看，那也行，打住吧，后面就不用再看了；如果你想补齐其他面，请耐心往下看。