照片：萨德-艾哈迈德（Saad Ahmad）在Unsplash上的照片
在一个阳光明媚的日子里，当我在一个自由职业者网站上滚动查看工作时，一些有趣的工作吸引了我的注意。这份工作是用d3.js将一个数学函数可视化。我立即写了一份提案，要求得到这份工作，然后经过短暂的面试，我得到了这份工作。
关于d3.js的一些简短解释，d3.js是Javascript中最著名和成熟的数据可视化库之一。这个库的主要用途是制作图表，他们已经发布了数百个官方图表实例。就其核心而言，d3.js只是一个文档操作库。这就是为什么这个库在它的能力方面有广泛的灵活性。
D3.js库的快照
作为一个成熟的库，我估计会有很多创建数学函数可视化的例子。不知道是我的google功夫生疏了还是怎么的，我只是用各种搜索词找到了2-3个相关的网页。其余的呢？"如何在d3中计算最大值"。所以在这里，我将通过创建一个简单的教程来为互联网贡献我的知识。
在本教程中，我们将尝试将f(x)=2x+1可视化。我们想要的结果可以在下面的图片中看到。完整的代码也可以在我的Github资源库中看到。
最终结果
首先，让我们创建一个基本的HTML文件，在这里我们将显示我们的结果。我们需要在这里做两件事。导入d3库，并指出d3 SVG的放置位置。让我们把SVG放在#root div中。
现在，让我们开始创建一个基本的d3模板。 创建一个画布来绘制我们的图形。为了方便后续步骤，让我们遵循d3的边距惯例。只需记住这个惯例，作为现在的神奇步骤，我们可以只用内容的宽度和高度来处理后面的一切。
现在，我们需要绘制坐标轴。让我们把它分成两部分。定义坐标轴，以及定义标签。定义坐标轴意味着定义坐标轴的范围。请注意，对于yScale，高度范围与y范围相反。这是因为在d3中，0是从顶部开始的。
接下来是坐标轴标签。请注意，坐标轴标签位于图表的padding中。为了处理这个问题，我们需要在x轴上放一个负数（因为0是最左边的图表），在y轴上放height + kin（因为height是最下面的图表）。我们还将y标签旋转了-90度，以便它垂直运行。
最后，是主要部分的时间了。绘制函数。做这个部分很简单。基本原则是，直线是由点组成的，而函数图也是由点组成的。正因为如此，我们将创建许多点并将它们连接起来，以绘制一个函数图。
为了更清楚地说明问题，在这段代码中，我们创建了2个辅助函数：f(x)和graphFunction 。 f(x)是我们希望被动画化的函数，而graphFunction是一个将返回表示f(x)的点数组的函数。这个函数将在d3的datum函数中被调用，它将收集数组中的所有点来创建一条线。
就这样了。完整的代码可以在我的Github资源库中看到。如果你有任何问题，欢迎在评论中提出!
大家好，我是Adyaksa，我写关于软件开发和我的语言学习经验。我计划每周发布一篇博客，讲述我在做副业时发现的一些有趣的事情。如果你有兴趣，你可以关注我，随时了解最新情况
D3.Js:数学函数的可视化》最初发表在《Dev Genius》杂志上，人们在这里通过强调和回应这个故事来继续对话。
