Products
GG网络技术分享 2025-03-18 16:14 0
D3.js是一个JavaScript库，用于根据数据处理文档。它使用HTML，CSS和SVG创建可在任何现代浏览器上查看的数据的可视表示。它还为交互和动画提供了一些非常棒的功能。
在本教程中，我们将探讨D3.js的基本概念和功能。我们将学习如何在一些例子的帮助下使用它，比如渲染条形图，呈现HTML和SVG元素，以及向它们应用转换和事件。
由于D3.js是一个JavaScript库，您可以简单地将它包含在脚本标记内的HTML文件中。
使用D3.js，我们可以操作文档对象模型（DOM），这意味着我们可以选择元素并对它们应用各种变换。
我们以一个简单的例子开始，我们将使用D3来选择和更改标题标签的颜色和字体大小。
因此，我们只需在d3对象上链接select()方法，然后使用style()。第一个参数决定了我们想要改变什么，第二个参数给出了值。结果:
Example 1: DOM Selection
您需要学习的下一个概念是数据绑定，因为这是D3最酷的功能之一。使用它，我们可以实时填充或操作DOM元素。
在我们的HTML中，我们有一个简单的无序列表<ul>：
我们想要使用数据对象来创建列表元素。以下是完成该操作的代码：
我们用data()方法传入数据，然后添加enter()，这就像循环一样。此点后的所有内容都将在fruits数组中的每个项目中执行一次。
换句话说，它会<li>为数据中的每个项目附加一个。对于每个<li>标签，它还会使用该text()方法在文本内附加文本。回调函数d内部的参数text()指向给定迭代（苹果，芒果等）中数组中的元素。
这是我们的最终结果：
Example 2: Data Binding
可缩放矢量图形（SVG）是一种在DOM中呈现图形元素和图像的方法。由于SVG是基于矢量的，因此它既轻便又可扩展。D3使用SVG创建所有的视觉效果，因此它是图书馆的核心构建模块。
在下面的例子中，在SVG容器中使用D3绘制矩形。
在这段代码中，D3正在DOM中渲染一个矩形元素。它首先选择SVG元素，然后在其中渲染一个矩形元素。它还使用该attr()方法设置矩形的x和y坐标及其宽度，高度和填充属性。
示例3：创建SVG元素
D3还让我们创建了许多不同类型的图表和图表，以高效的方式表示数据。在下面的例子中，我们使用D3创建一个简单的条形图。
我们首先直接在HTML中创建一个SVG标签。
然后，我们将编写我们需要的JavaScript，以便在我们的<svg>标记中呈现条形图：
在这段代码中，我们有一组数字，我们将用它来呈现条形图。数组中的每个项目都代表一个单独的栏。我们利用这样一个事实，即条只是具有可变宽度或高度的矩形。
选择SVG和矩形元素后，我们使用该data()方法传递数据集并调用enter()开始循环数据。
对于每个数据项，我们渲染一个矩形并将其宽度设置为与其值相等。然后我们设置每个小节的高度，为了避免重叠，我们通过减去1来提供一些填充barHeight。
然后，我们使用translate属性来转换我们的小节，它将逐个放置每个矩形，而不是从同一个点开始。transform()需要一个回调函数来获取其参数中的数据和索引。我们通过将索引与条的高度相乘来在y轴上平移矩形。
结果如下：
示例4：创建条形图
最后，让我们来看看事件处理。D3还支持内置和自定义事件，我们可以使用它的侦听器将其绑定到任何DOM元素。在下面的示例中，我们将click事件绑定到按钮，并在其事件处理函数中将标题标签附加到主体。
所以当我们点击按钮时，会出现下面的文字：
示例5：事件处理
D3.js是一个功能强大且简单的JavaScript库，它允许您使用HTML，CSS和SVG基于数据处理文档等。
对象的不变性意味着我们不希望对象在创建后以任何方式更改（将它们设置为只读类型）。
假设我们需要定义一个 car 对象，并在整个项目中使用它的属性来执行操作。我们不能允许错误地修改任何数据。
| const myTesla = { maxSpeed: 155, batteryLife: 300, weight: 2300 }; |
Object.preventExtensions() 防止扩展
此方法可防止向现有对象添加新属性，preventExtensions() 是不可逆的操作，我们永远不能再向对象添加额外的属性。
| Object.isExtensible(myTesla); // true Object.preventExtensions(myTesla); Object.isExtensible(myTesla); // false myTesla.color = \'blue\'; console.log(myTesla.color) // undefined |
Object.seal() 密封
它可以防止添加或删除属性，seal() 还可以防止修改属性描述符。
| Object.isSealed(myTesla); // false Object.seal(myTesla); Object.isSealed(myTesla); // true myTesla.color = \'blue\'; console.log(myTesla.color); // undefined delete myTesla.batteryLife; // false console.log(myTesla.batteryLife); // 300 Object.defineProperty(myTesla, \'batteryLife\'); // TypeError: Cannot redefine property: batteryLife |
Object.freeze() 冻结
它的作用与 Object.seal() 相同，而且它使属性不可写。
| Object.isFrozen(myTesla); // false Object.freeze(myTesla); Object.isFrozen(myTesla); // true myTesla.color = \'blue\'; console.log(myTesla.color); // undefined delete myTesla.batteryLife; console.log(myTesla.batteryLife); // 300 Object.defineProperty(myTesla, \'batteryLife\'); // TypeError: Cannot redefine property: batteryLife myTesla.batteryLife = 400; console.log(myTesla.batteryLife); // 300 |
注意：如果希望在尝试修改不可变对象时抛出错误，请使用严格模式。
以上就是js如何创建不可变的对象的详细内容，更多请关注网站的其它相关文章！
Demand feedback
