d3.js 布局(layout)是什么

时间 2019-11-22

标签 d3.js 布局 layout 什么栏目 JavaScript 繁體版

原文原文链接

前言

经过以前的学习实践了一阵子d3，可是不少效果实现都是照着demo改改下来的，没有本身一套完整的步骤。在通过更多地了解与学习以后，终于略知一二，其中最大关系的就是d3的布局(layout)。css

d3.js绘图步骤

d3的绘图步骤相比Echarts等开箱即用的框架复杂得多，这里拿来一张很棒的图（来源为十二月咖啡馆，连接于文末）html

从中能够看到布局在其中起着关键的一步。

布局究竟是什么？

那么d3中什么是布局呢？跟CSS同样吗？？？？
还有咱们以前的柱状图怎么就不须要这玩意了？——>由于图形太简单。
回到正题，这里我参考了三个不一样地方出处的理解：git

十二月咖啡馆：布局的做用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。github

d3官方文档： Layout functions sets up and modifies data so that it can be rendered in different shapes. The layout functions don't do the drawing of the shapes.算法

Visualization on the Web Tutorials：Layouts make it easier to spatially arrange, shape and size elements representing data on the screen.数组

同时在实践以后，我添油加醋地给出了本身的理解：app

布局(layout)是一个函数，将要可视化的数据data放入布局函数中，通过算法处理，返回方便d3绘图的数据。同时，布局函数并不直接参与绘图，只是告诉你绘图所用的关键信息
框架

这么说可能仍是有点晦涩，接下来我以一个demo说明less

pie(饼图) demo

此demo学习了Visualization on the Web Tutorials的例子，连接置于文末，可是文中一个地方对d3函数链式返回理解有误。svg

说明大部分写在代码注释里，下一部分根据注释及解释进一步说明，完整代码点击这里

demo步骤说明

步骤1：肯定svg

。没什么好说的，可是仍是写在步骤里

<body>
    <svg class="pie-svg"></svg>
</body>
复制代码

步骤2：假设数据及一些基础数值

也没什么好说的，注意的一点就是svg的transform与css的有不一样
看看假设的数据data，立刻用到

/** * 假设数据 */
    const data = [
        {
            name: 'A',
            percentage: 30
        },
        {
            name: 'B',
            percentage: 20
        },
        {
            name: 'C',
            percentage: 30
        },
        {
            name: 'D',
            percentage: 20
        }
    ];
    /** * 基础数值 */
    const width = 800,
          height = 500,
          radius = Math.min(width, height)/2 - 10;
          console.log(radius);
    /** * 插入g容器 */
   const g = d3.select('.pie-svg')
                 .attr('width', width)
                 .attr('height', height)
                 .append('g')
                 .attr('transform', `translate(${width/2}, ${height/2})`);//图形左上角相对画布偏移
复制代码

步骤3：pie layout——用于返回适合绘图的数据

这里就是重点了！经过layout生成方便绘图的数据，先看代码👇

/** * 定义layout generator(怎么翻译？？布局发生器？？)，此例中即为变量pie */
    const pie = d3.pie();
    //告诉layout generator怎么处理要可视化的数据
    pie.value(function(d){
        return d.percentage;
    });
    //多数文章将布局理解为用于数据转换，我我的添油加醋一番认为以下： 
    //原数据 ————> layout generator ————> 便于可视化布局的数据
    const pieData = pie(data);
    console.log('pieData:', pieData);//原数据于pieData[i].data之中
复制代码

截图pieData瞧瞧布局函数干了什么

如图，原来的data[i]置于pieData[i].data中，其余的属性好比startAngle、endAngele等等，就是方便绘图的数据了，那怎么使用呢？见下一步。

步骤4：arc generator——利用关键信息、绘图使用的工具

layout给了咱们绘图的关键信息，arc generator就是利用这些关键信息的工具。
arc generator可利用startAngle，endAngle这些属性绘制path元素的d属性来描绘路径。

/** * 建立arc generator(此例中即为变量arc)，经过pieData，生成path的d属性 * 上述原理：arc经过pieData数组中每一个元素对象的startAngle,endAngle进行计算（outerRadius与innerRadius在此例中设置了统一） * 流程图以下： * pieData[i]————>arc————>path元素d属性 * 具体请看文档:https://github.com/d3/d3-shape/blob/v1.3.4/README.md#arc */
    const arc = d3.arc();
    arc.outerRadius(radius);
    arc.innerRadius(0);
    console.log(`举例:生成path的d属性：\n`,arc(pieData[0]));
复制代码

瞧瞧控制台

如今有 最直观的绘图数据了！下一步就是直接往“画布”上扔就能够了

步骤5：画画

/** * 如今有了处理后的数据(pieData)和生成path的arc generator(arc) * 能够开始画图了！ */

     //绑定数据，在g容器中插入g
    const groups = g.selectAll('g').data(pieData)
                    .enter()
                    .append('g');
    //画path
    groups.append('path')
          .attr('d', arc)//将pieData[i]传予arc
          .style('fill', d=>color(d.data.name));

    //画text
    groups.append('text')
          .text(d=>d.data.name)
          .attr('transform', d=>`translate(${arc.centroid(d)})`) //计算path的中心位置
          .attr('dy', '.35em')
          .style('text-anchor', 'middle')
          .style('font-size', '20px');
复制代码

最后完成

结语

此demo只是最为简单的一个例子，但让人对布局(layout)有了大体的了解。
致于d3的绘图步骤，我在十二月咖啡馆的图的基础上再次总结了一番：

更复杂的图表确定会有更多的处理，但大致思路如此
以上内容若有不正确之处，还请大佬指教

参考资料

Visualization on the Web Tutorials——Advanced D3: Layouts
十二月咖啡馆——布局
 GitHub——D3 Layouts
d3.pie()
d3.arc()