d3.js画垂直表格线的小例子

最新推荐文章于 2024-08-13 08:58:13 发布

weixin_34393428

最新推荐文章于 2024-08-13 08:58:13 发布

阅读量963

点赞数

文章标签： python

原文链接：https://my.oschina.net/limodou/blog/188843

版权

2019独角兽企业重金招聘Python工程师标准>>>

正在开发甘特图组件，顺便有一些测试的d3代码片段，下面是一个用来画垂直表格线的例子：

<!doctype html>
<html>
<head>
<title>Test</title>
<style>
line {stroke-width:1px;
stroke:#999;}
</style>
<script src="../src/d3.min.js"></script>
</head>
<body>
<script>
var svg = d3.select('body').append('svg');
function draw(w, h, d, x1, y1){
    x1 = x1 || 0;
    y1 = y1 || 0;
    var x = d3.scale.linear().domain([0, w/d]);

    svg.attr('width', w)
        .attr('height', h);

    var nodes = svg.selectAll('line.xline')
        .data(x.ticks(w/d));

    nodes
        .attr('x1', function(i){return i*d+0.5+x1;})
        .attr('y1', y1)
        .attr('x2', function(i){return i*d+0.5+x1;})
        .attr('y2', h+y1);

    //draw y line
    nodes.enter()
        .append('line')
        .attr('class', 'xline')
        .attr('x1', function(i){return i*d+0.5+x1;})
        .attr('y1', y1)
        .attr('x2', function(i){return i*d+0.5+x1;})
        .attr('y2', h+y1);

    nodes.exit().remove();

}

draw(200, 200, 24);
</script>
</body>
</html>

上面d3.min.js是放在父目录下的src子目录中。通过调用draw(w, h, d, x, y)可以在指定的位置根据长度和宽度，绘制间隔不同的竖线来。x, y没给时缺省为 0, 0。d为两条线之间的间距。这里没有使用d3的坐标柚的原因是，这个函数在重画时，可以使用已经创建好的元素。而一般的坐标柚每次都是创建新的元素，会越来越多。

这里利用d3.scale.linear().domain([0, w/d])来生成序列，w/d是为了计算给定的宽度可以最多可以分成多少段。然后数据通过ticks(w/d)来返回。传入ticks的值就是线的段数。

通过执行data()，d3会把数据分为三个集合，一个是update就是已经存在元素的集成，一个是enter，就是将要创建新元素的信顶层，一个是exit，就是将要被删除的集合。update集成其实没有特别的方法，直接就是selectAll('line.xline').data(data)后的结果。

在画线时还发现一个问题，那就是线的宽度有点大，后来在网上搜了一下，有人给出了加减0.5就可以让线变细。所以上面的代码中的0.5就是这么来的。

svg可以用css来控制元素的显示效果，非常方便。

最后画出来的效果就是这样：

在此输入图片描述