背景本文收录在《数据可视化和图形学》专栏。上面这篇文章介绍了纹理相关的内容，使用WebGL进行3D实现。emm.....这篇文章是一个新的方向，也可以算是一个探索写作的思路。（针对群里小伙伴的需求说说框架的日常使用）当然理论知识肯定还是会穿插的。写作方法将从学习（研究）、使用和深入讲课中混合。其实我每天都在分享使用某个（框架）库的基本过程，希望对大家有所帮助。在开始之前，先简单介绍一下今天的主角D3JS（以下简称D3）。D3的全称是Data-DrivenDocuments。假粉哼哼~）D3的优势：星级库毫无疑问，github的star接近98k。那么可以想象，用户社区一定是完整的。D3是灵活的，每个模块都可以拆分和组合。渲染设计非常出色，专注于形状和比例的基本原语。不可针对特定图表进行配置。这样动画（animation）比较灵活，交互（interaction）效果很好。支持多种渲染模式，svg，canvas，图表种类多，图表示例非常齐全，日常开发可能不需要基础模块的组合。示例教程在Observable中。今天，就如何学习D3、使用D3、深入D3做一个简单的探讨。跟我来！本文从几个方面概述了学习库阶段（研究阶段）使用库阶段（日常开发阶段）深入库阶段（学习框架，或者在框架源码上定制新需求。）学习库（研究库）进行调研，首先检查库是否满足业务发展和业务扩展，看库的更新频率和稳定性。（当然，强大的团队也可以clone一个当前版本，方便后续维护。）库社区是否活跃，方便后续问题讨论跟进（如果团队有足够的例子，可以不关心）this)是否兼容现有的主框架（Maintechnologystack）兼容性问题，如果一个库满足以上几点。应该问题不大（也可以纳入调查）。按照上面的步骤，看看D3是怎么说的。1、首先检查图书馆是否满足业务发展和业务扩展。D3支持SVG(HTML)/Canvas渲染模式。总之，一些适合的抽象业务场景日常图表开发的种类很多，包括关系类、统计类、简单地图类……数据量大但属于静态类分析（只加载一次）可以选择SVG渲染数据量大，属于高频交互可以选择CanvasRendering（如果数据量大，交互和渲染方面的优化甚至可能需要改变渲染方式）。在图表渲染之前、期间和之后都需要很酷的动画效果。...问题2和3，贴几张成员反馈的commit和issue的图片和提交曲线（如果截图不完整可以去github看看，这个已经快一年了，可能不准确bug太少哈哈）在使用库阶段（日常开发阶段）有几种情况。有现成的例子，完全可以满足开发需要。没有现成的例子，但是可以混合使用几个例子来达到效果。使用API??并自己研究它。当库不能满足需求时进行定制开发。首先，很多人一直在第一种和第二种情况中徘徊。这样做的原因是代码搬运工的水平直截了当。当然，这是一个更深入的模块。只有知道它是什么，才能发挥更大的优势。对于这方面的分享，目前可能很少会以图表为例。要实现上图，只需要如下几步就可以限制canvas的一些属性。宽度和高度需要用2个刻度来绘制。min和max需要通过数据绘制柱状图。数据绑定需要限制画布的一些属性。宽高varwidth=1000;varheight=500;varmargin=({top:20,right:0,bottom:30,left:40})c??onstsvg=d3.select("body").append(“SVG”）；需要绘制2个尺度。varx=d3.scaleBand().domain(data.map(d=>d.name)).range([margin.left,width-margin.right]).padding(0.2)vary=d3.scaleLinear().domain([0,d3.max(data,d=>d.value)]).nice().range([height-margin.bottom,margin.top])svg.append("g")。attr("class","x-axis").attr("transform",`translate(0,${height-margin.bottom})`).call(d3.axisBottom(x).tickSizeOuter(0))//设置x轴刻度svg.append("g").attr("class","y-axis").attr("transform",`translate(${margin.left},0)`).call(d3.axisLeft(y))//Y轴坐标刻度需要绘制柱状图形svg.append("g").attr("class","bars").attr("fill","skyblue").selectAll("rect").data(数据).join("rect")d.value)).attr("width",x.bandwidth()).attr("height",d=>y(0)-y(d.value))上面的简单例子可以体现出基本的流程您对D3的使用首先，您需要了解您的画布是如何受到限制的。然后你必须考虑你想画什么。二是添加相应的数据。当然，学习它的语法对于改变你的编码思维是非常重要的。非结构化编程过程。深入库阶段（学习框架，或者有新需求在框架源码上定制。)首先，在不考虑定制化开发的情况下，本文先了解一下它的内部实现。打开D3仓库，阅读源码会发现，d3-array数组d3-axis坐标轴d3-brushd3-color颜色……其实这和它的设计有关系。就是把能拆的部分尽量去掉。这样做的好处是，如果你想与当前使用的库集成，非常简单。这也是D3大火的原因。本文无意拆解具体模块进行扩展。基本上我可能会用drag（拖拽计算）、quadtree（四叉树）和一些布局算法……其实不多。有兴趣的可以留言，拿出几篇文章来写这篇《讨论如何在底层进行定制化》。友情链接D3仓库地址mdn文档示例代码仓库最后，关于图形/数据可视化，如何学习方向，我也在摸索。也许我写完这个系列后可以更好地回答你。请发表更多评论，不要犹豫，启发我。如果有什么我想分享的，只要我懂或者我能学会分享。（当然学不会也不丢人，哈哈）
