如何创建多个条形图
D3.js is the most popular JavaScript library for creating visual representations of your data. However, it’s a bit tricky to learn, so I think it’s important to start softly.
D3.js是最流行JavaScript库，用于创建数据的可视表示。 但是，学习起来有些棘手，所以我认为轻柔地开始很重要。
In this tutorial, you’ll learn how to create your very first bar chart with D3. It’ll give you an intro to the most important concepts, while still having fun building something.
在本教程中，您将学习如何使用D3创建第一个条形图。 它会为您介绍最重要的概念，同时仍然很乐于构建一些东西。
We’ve also created a free D3.js course on Scrimba. Check it out here.
我们还在Scrimba上创建了免费的D3.js课程。 在这里查看。
Now let’s get started.
现在开始吧。
设置 (The setup)
We’ll use the simplest setup possible, simply importing the D3 library from a CDN.
我们将使用最简单的设置，只需从CDN导入D3库即可。
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script></script>
</body>
</html>We’ll write our D3 code in the script tag. Secondly, we’ve added an <svg> element to the DOM. If you want to play around with the code as you read this tutorial, check out this Scrimba playground, which contains the final version of the code.
我们将在script标签中编写D3代码。 其次，我们在DOM中添加了<svg>元素。 如果您想在阅读本教程时使用这些代码，请查看此Scrimba操场 ，其中包含了代码的最终版本。
The first thing we’re going to do is select this element, and style it a little bit.
我们要做的第一件事是选择此元素，然后对其进行一些样式设置。 <
最低0.47元/天 解锁文章
5363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
