他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Access denied | codepen.io used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (codepen.io) has banned your access based on your browser's signature (3e6dba-ua98).I am using the d3.behavior to attach a zoom event to my SVG, so then the mouse wheel is used I can get a zoom event with translate and scale which I then use to set the transform attribute of the element.
It seems the zoom.scale value is persistent somewhere so every time the mouse wheel is used it always contain the correct zoom value, taking into account of all the previous zoom events. This is cool but I need a way to clear that value, say a reset zoom button. When the user clicked on the button, next time he scrolls to zoom the element will be scaling from its original size again.
So where does D3 store this value and how do I reset it?
This question also has another aspect in it: if I programmatically set the "transform" attribute to do a scaling transformation, the zoom event will not take those into account. So if I later use mouse wheel to zoom I am screw because I can trashing the original transformation. Thus I need a way to programmatically set, not just reset, the "translate" and "scale" value of the zoom event, wherever it is storing them.
解决方案 The zoom scale is stored in your zoom object. I'm guessing you have a line of code that looks like:
var zoom = d3.behavior.zoom()
Getting the scale from that object is simple:
zoom.scale()
To zoom out x2:
zoom.scale( zoom.scale()/2 )
Translation works the same way, with zoom.translate() and zoom.translate( [x, y] ) to get and set.
To keep the display transform in sync with the zoom, just make sure that when you update one, the other is also updated.
本文地址： &
我使用d3.behavior将缩放事件附加到我的SVG，所以使用鼠标滚轮我可以得到一个缩放事件与平移和缩放，然后我用来设置元素的transform属性。
看起来zoom.scale值在某处是持久的，所以每次使用鼠标滚轮时，它总是包含正确的缩放值，同时考虑到所有以前的缩放事件。这是很酷，但我需要一个方法来清除该值，说一个重置缩放按钮。当用户点击按钮时，下次滚动到缩放时，元素将再次从原始大小缩放。
那么D3存储这个值的方式我重置了它？
这个问题还有另一个方面：如果我以编程方式设置“ transform“属性进行缩放变换，缩放事件不会考虑这些。所以如果我以后使用鼠标滚轮缩放我是螺钉，因为我可以捣毁原始的变换。因此，我需要一种方法来以编程方式设置，而不只是重置缩放事件的“翻译”和“缩放”值，无论它存储它们。
解决方案 缩放比例存储在缩放对象中。我猜你有一行代码看起来像：
var zoom = d3.behavior.zoom（）
从该对象获取缩放比例很简单：
zoom.scale（）
要缩小x2： / p>
zoom.scale（zoom.scale（）/ 2）
翻译的工作方式相同， zoom.translate（）和 zoom.translate [x，y]）以获取和设置。
要保持显示变换与缩放同步，更新一个，另一个也更新。
本文地址： &
扫一扫关注官方微信使用D3.js制作图表详解
转载 & & 作者：Evelynzzz
D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。
D3是用于数据可视化的Javascript库。使用SVG，Canvas和HTML。结合强大的可视化技术和数据驱动的DOM操作方法。
D3与JQuery的区别 D3是数据驱动的，JQuery不是：我们使用JQuery直接操纵元素；但是使用D3
时我们需要通过D3专有的data()，enter()和exit()方法提供数据和回调，然后D3操作元素。 D3通常用于数据可视化；JQuery用于创建Web应用。D3有很多数据可视化扩展；JQuery有很多Web应用插件。两者都是Javascript DOM操作库，提供CSS选择器和流畅的API。
最常用的方法
d3.select(selector)：选择第一个匹配selector的元素。如果没有匹配的元素，返回一个空的选择（但不是null或undefined）。
d3.selectAll(selector)：与select()不同的是，会选择所有匹配的元素。
selection.append(type)：如果指定的type是一个字符串，则将这个type（标签名称）作为新元素附加到每个选定元素的最后一个子元素。
selection.attr(name, [value])：value确定时，将selection中名为name的属性值设置成value。value可以为常量或者方法。如果value没有给出，返回selection中第一个非空元素的name属性当前值。
selection.data([data[,key]])：将数据和元素绑定起来，并返回一个新的selection。
selection.enter()：返回enter selection。此时DOM元素少于对应的数据。用于添加缺少的DOM元素。比如：
var div = d3.select("body")
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(function(d) { });
如果body是空的，上面的代码就会根据数据创建新的div元素，然后添加到body元素中，并将文本内容设置为对应的数字。页面结果如下：
&div&4&/div&
&div&8&/div&
&div&15&/div&
&div&16&/div&
&div&23&/div&
&div&42&/div&
selection.exit()：返回exit selection。此时DOM元素多于对应的数据。用于移除多余的DOM元素。比如，基于上面的例子，我们要更新数据：
div = div.data([1, 2, 4, 8, 16, 32], function(d) { });
因为此时指定了key方法（用于指定数据和元素匹配的顺序等），并且数据[4,8,16]匹配已经存在的元素，所以update selection只包含3个div元素。我们可以使用enter selection添加3个新元素：
div.enter().append("div").text(function(d) { });
然后，还需要移除不需要的元素[15, 23, 42]：
div.exit().remove();
页面结果：
&div&1&/div&
&div&2&/div&
&div&4&/div&
&div&8&/div&
&div&16&/div&
&div&32&/div&
制作柱状图
柱状图示例
使用D3的时候，要对SVG的结构有一个了解。要绘出什么图形，需要用到什么标签，标签需要定义什么属性。
比如，制作一个柱状图，主要是XY坐标轴和柱形。XY轴用到line标签绘制直线，以及text标签显示刻度的文字。柱形用到rect标签绘制长方形，那如果要带圆角的长方形，我们可以设置rect标签的rx或ry属性，如果要定义长方形的位置，需要设置x和y属性等。就这样，一部分一部分的组合到一起成为一张图。
以下的内容是基于D3 3.x 的API，有些接口跟D3 4.0是不同的。
D3绘图首先要创建一个svg元素并定义宽高等属性：
var svg = d3.select(id).append("svg")
.attr('class', 'svg_timeline')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
制作坐标轴首先需要用到D3的比例尺。用到方法 axis.scale([scale]) ，设置坐标轴的比例尺，或者返回当前的比例尺。比例尺分为：
定量比例尺：连续的数据，比如数字。时间比例尺：数据是时间。序数比例尺：离散的数据，比如名称，类别等。
比如我们要制作一个有时间刻度的X轴和一个数字刻度的Y轴，就可以使用时间比例尺和定量比例尺，或者更具体的说，线性比例尺。
d3.scale.linear()：创建一个线性比例尺。 d3.time.scale()：创建一个时间比例尺。刻度和刻度格式配置为本地时间。
确定比例尺之后还需要设置输入域和输出范围。比如一个x轴的比例尺为：
var x = d3.time.scale()
.range([0, 坐标轴的宽度])
.domain(最小日期, 最大日期);
最小日期和最大日期都是Date对象。然后设置X坐标轴的比例尺并创建它：
//生成x坐标轴
var xAxis = d3.svg.axis()
//新建一个默认的坐标轴
//设置比例尺
.ticks(d3.time.day, 1)
//指定刻度生成的方式
.tickFormat(function(d){
//自定义刻度文字格式
var month = d.getMonth() + 1;
return month+'月'+ d.getDate() +'日';
.tickPadding([15]) //坐标轴线与文字之间的距离
.tickSize(-height)
.orient("bottom"); //位置
ticks的参数类型取决于对应的比例尺的类型，这里传的参数是时间间隔，也就是说刻度与刻度之间是相隔一天的。
tickFormat则让我们可以自定义刻度的文字格式。
值得一说的是，如果数据中对应X轴的数据是字符串，比如‘'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。
format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。
var parseDate = d3.time.format("%Y-%m-%d"). //时间解析器
var date = parseDate(''); //将字符串解析成日期
最后，在svg元素中添加坐标轴：
//添加X轴元素
svg.append("g")
.attr("class", "axis x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。
柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。
//添加条形的元素
var bars = svg.selectAll(".barRect")
.data(ddata)
//绑定数据
.enter().append("g")
//创建缺少的页面元素
.attr('class', 'barRect')
.attr("id", function(d, i) {
return "barRect-" +
//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
.attr('class','bar-rect')
.attr("width",16)
//长方形的宽度
.attr("y", function(d) {
return y(d.value);
//使用比例尺确定坐标Y值
.attr("x", function(d) {
return x(d.date) - 8;
//使用比例尺确定坐标X值
.attr("height", function(d) {
//条形的高度
return height - y(d.value);
.attr('rx',10) //圆角
.attr('ry',10) //圆角
.attr('fill','url(#linear-gradient)'); //填充渐变色
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)