D3js-绘制SVG

D3js-绘制SVG现在,我们已经熟悉了SVG图像的基本结构和元素,那么,应该怎样用数据生成图形呢?你可能已经注意到,SVG元素的所有属性都是标签内属性的形式。即,它们在标签内表示为属性/值的二元组,比如property=”value”/看起来非常像HTML吧!class=”eureka”之前,我们已经用了D3的常用方法append()和attr()来生成新的H

大家好,欢迎来到IT知识分享网。

另外一个网站:http://www.webhek.com/svg/

现在,我们已经熟悉了SVG图像的基本结构和元素,那么,应该怎样用数据生成图形呢?

你可能已经注意到,SVG元素的所有属性都是标签内属性的形式。即,它们在标签内表示为属性/值的二元组,比如

<element property="value"/>

看起来非常像HTML吧!

<p class="eureka">

之前,我们已经用了D3的常用方法append()attr()来生成新的HTML元素,并设置它们的属性。因为SVG元素也属于DOM,因此和HTML元素没什么两样,所以,我们也可以以完全一样的方式来使用append()attr()来生成SVG图像。

生成SVG

首先,我们需要生成一个SVG元素,它是所有SVG图形的容器。

d3.select("body").append("svg");

这句代码的意思是,找到body元素,然后,将svg元素刚好插到结束标签</body>之前。这么写自然没什么问题,但是我建议把返回值保存下来:

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

因为D3中的大部分方法都返回它所操作的元素的引用,这里的svg变量是append()的返回的一个引用。不要把svg仅仅视为是一个变量,而要把它看成是刚创建的新的SVG对象。这个引用可以让你少写很多代码,因为你没必要每次都去搜索SVG,比如d3.select("svg"),而只需要用指定的这个svg对象。

svg.attr("width", 500)
   .attr("height", 50);

当然,你完全可以将上面的两句代码合为一体。

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 50);

结果测试页中什么也看不到,但是你确实可以通过web inspector看到DOM中有一个空的SVG元素。

为了舒服一点,我建议将宽度和高度值存为变量,放在代码开始醒目的位置,比如(测试页面)

//Width and height
var w = 500;
var h = 50;

我后面所有的示例都保持了这个习惯。图像大小存成变量后,可以方便后续代码中的引用,比如

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)   // <-- Here
            .attr("height", h); // <-- and here!

用变量存储常用数值,是编程的惯用做法。如果你向上苍请愿将整个世界变量化,我会非常乐意签上我的名字的。

数据驱动的形状

现在是时候画一些图形形状了。还是使用原来的简单数据集。

var dataset = [ 5, 10, 15, 20, 25 ];

然后,使用data()来遍历这些数据点,让每个数据点生成一个circle

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle");

再次强调,selectAll()返回的是所有圆的空引用(这些圆此时并不存在),data()将我们的数据绑定到我们将要创建的元素上,而enter()返回的是新元素的占位元素的引用,最后,append()添加一个circle到DOM中。

为了便于后面的代码再次引用所有的这些圆,我们可以用一个变量将它们的引用存起来。

var circles = svg.selectAll("circle")
                 .data(dataset)
                 .enter()
                 .append("circle");

圆倒是生成了,但它需要设置其位置和大小。下面的代码才是真正出奇迹的地方,

circles.attr("cx", function(d, i) { 
    
        return (i * 50) + 25;
    })
    .attr("cy", h/2)
    .attr("r", function(d) { 
    
        return d;
    });

D3js-绘制SVG

对着测试页面膜拜一下。我们再逐行理解这句代码。

circles.attr("cx", function(d, i) { 
    
    return (i * 50) + 25;
})

这段代码的意思是在所有圆的引用上为每个圆设置cx年属性。我们的数据已经绑定到了circle元素上,所以对于每个circle,值d对应于数据集(5,10,15,20,25)中的某个值。而另一个参数i,也会自动地累加,也就是变成数据点的序号。比如,第1个圆的i为0,第2个为1,依此类推。这里,i的作用是让圆的中心坐标递增,从而从左至右排列,因为i的值是一直增大的。

(0 * 50) + 25 returns 25
(1 * 50) + 25 returns 75
(2 * 50) + 25 returns 125
(3 * 50) + 25 returns 175
(4 * 50) + 25 returns 225

为了确保i在函数体中可用,你必须让它成为函数定义的一个参数(function(d,i))。而且,前面的d也不能省,即使你并没有用到它。否则,函数会将第1个参数视为d,即数据点的值。

下一行代码是

.attr("cy", h/2)

其中,h是整个SVG图像的高度,所以h/2是半高。这样的效果是让所有的圆都排列在图像垂直方向的中间。

.attr("r", function(d) { 
    
    return d;
});

最后,每个圆的半径r被设置为d,即对应的数据点的值。

漂亮的颜色

填充颜色和线划颜色只是另外两种属性,所以,你可以用同样的方法来设置。比如通过下面的代码

.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", function(d) { 
    
    return d/2;
});

于是,我们得到下面的图像(测试页面)

D3js-绘制SVG

当然,你可以混合和组合各种属性,并定制各种各样的函数来设置属性。数据可视化的技巧本来就在于选择合适的映射,以便让你的数据的视觉表现派上用场,并被用户所理解。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/15908.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信