视觉开发 学习 参考课本_D3的视觉参考

视觉开发 学习 参考课本

I’ve been using D3 quite a bit recently to build an analytics dashboard. The main reason I went with D3 was because I got tired of dealing with the limitations of the various charting libraries and trying to understand their documentation.

我最近一直在使用D3来构建分析仪表板。 我选择D3的主要原因是因为我厌倦了处理各种图表库的局限性并试图理解它们的文档。

I found myself in a situation where I was spending more time trying to figure out whether the library I was using could do what I wanted rather than actually trying to figure out how to do what I wanted.

我发现自己处于一种情况下，我花了更多时间试图确定我正在使用的库是否可以完成我想要的工作，而不是实际尝试确定如何执行我想要的工作。

With D3, there is almost never a case of whether you can do something. It’s always about how you can do something.

使用D3，几乎永远不会出现您是否可以做某事的情况。 它总是与您如何做某事有关。

Granted, getting to grips with D3’s API is a mammoth challenge but it’s worth the hassle.

诚然，掌握D3的API是一个巨大的挑战，但值得一试。

In this article, I’m going to try to give you a visual representation of my understanding of D3 after working with it for a while now.

在本文中，我将在一段时间后尝试以直观的方式展示我对D3的理解。

D3的风风雨雨 (The Ups And Downs Of D3)

The thing I love about D3 is that its built on top of the smallest primitives, and you have access to all of those primitives.

我喜欢D3的地方是它建立在最小的原语之上，您可以访问所有这些原语。

If you were to use a typical charting library for React, you’d probably do something like this

如果您要为React使用典型的图表库，则可能会执行以下操作

import { BarChart } from 'generic-charting-library'

export default class Chart() {
  render() {
    return (
      <BarChart data={data} /
    )
  }
}

The above is perfectly fine for most use cases. However, the moment you want to do anything slightly more complicated like interacting with the bar chart in unique ways (think beyond just displaying a tool tip), my personal experience has been that it turns into a war with the documentation of the library.

上面对于大多数用例来说都是完美的。 但是，当您想做一些更复杂的事情时，例如以独特的方式与条形图进行交互(不仅仅显示工具提示)，我的个人经验是，它与库的文档变成了一场战争。

First, you have to figure out if it is even possible to do this with the library, and then you have to figure out how to do it.

首先，您必须确定是否甚至可以使用该库执行此操作，然后必须确定如何执行此操作。

The first part, in my experience, is the hard bit. It is quite frustrating to look for something that you’re not sure exists. However, with D3, that isn’t the case. Pretty much anything you want to do can be done with D3. It is simply a matter of figuring out how to do it.

根据我的经验，第一部分是困难的部分。 寻找不确定的东西真是令人沮丧。 但是，对于D3，情况并非如此。 使用D3几乎可以完成任何您想做的事情。 这只是弄清楚如何做的问题。

The downside of course is that D3’s API and documentation is so vast and expansive, that you end up having disparate pieces of knowledge of how things work. This is also a consequence of how I chose to learn D3, that is by building something with it. When you choose to build something with a technology, you only look up the pieces relevant to what you’re currently building.

当然，不利的一面是D3的API和文档如此之大和广泛，以至于您最终对事物的工作原理有了不同的了解。 这也是我选择学习D3的结果，那就是通过使用它来构建一些东西。 当您选择使用某种技术进行构建时，您只会查找与当前正在构建的内容相关的部分。

Say, for instance, you wanted to build a bar chart. Well, you’re probably to going look up something like how to define and place axes on a web page. Then, you’ll probably look up how to define the actual bars of the chart themselves. These are well defined problems and have straightforward solutions.

举例来说，您想构建一个条形图。 好吧，您可能需要查找类似如何在网页上定义和放置轴的内容。 然后，您可能会查找如何定义图表本身的实际柱线。 这些是定义明确的问题，并且有直接的解决方案。

I took pretty much the same route and ended up in a frustrating place where I could get things to work but I couldn’t quite understand how it was all coming together.

我几乎走了同样的路，最终到了一个令人沮丧的地方，在那里我可以使事情工作，但我不太明白这一切是如何融合在一起的。

I’m going to explain my thought process of how I put together all the different pieces.

我将解释我如何组合所有不同部分的思考过程。

大图景 (The Big Picture)

The following image is that of a simplistic bar chart (something we’ll try to recreate for this post)

下图是条形图的简化图(我们将尝试为该帖子重新创建该图)

Now, here’s the same bar chart with the different components being marked out. By components, I mean the different things we will need to worry about when creating the bar chart using D3.

现在，这是相同的条形图，其中标记了不同的组件。 对于组件，我的意思是在使用D3创建条形图时我们需要担心的不同事情。

1. The X-axis
   X轴
2. The Y-axis
   Y轴
3. The title
   标题
4. The bars (I’m counting all of them as one)
   酒吧(我把他们都算在内)
5. The spacing between the ticks on the X axis
   X轴刻度线之间的间距
6. The actual chart area itself
   实际图表区域本身
7. The spacing between the ticks on the Y axis
   Y轴刻度线之间的间距

We’ll explore everything except the spacing between ticks in detail. The spacing between ticks will take care of itself when figure out how to construct the axes.

除了刻度线之间的间隔，我们将详细研究所有内容。 找出如何构造坐标轴时，刻度线之间的间距会自动处理。

构成全局的小事情 (The Small Things That Make Up The Big Picture)

Before we can even start with composing the small pieces that make up the big picture, we need to understand the one element that is a part of every component in the chart above: the SVG element.

在我们甚至开始组成构成全局的小片段之前，我们需要了解上图中每个组件的一部分的一个元素：SVG元素。

SVG元素 (The SVG Element)

A D3 chart is primarily composed of SVG elements. In the bar chart above, the x-axis, the y-axis, each individual bar are all instances of SVG elements.

D3图表主要由SVG元素组成。 在上面的条形图中，x轴，y轴，每个单独的条形图都是SVG元素的所有实例。

I recommend reading this page to get a better understanding of what an SVG is. SVG’s are essentially how you describe 2D graphics on a web page.

我建议阅读此页以更好地了解什么是SVG。 SVG本质上就是您在网页上描述2D图形的方式。

The most basic example of an SVG element is the circle element.

SVG元素的最基本示例是circle元素。

See the Pen  qGMxzO by Zaid Humayun (@redixhumayun)   on CodePen.

在CodePen上查看Zaid Humayun( @redixhumayun )的Pen qGMxzO 。

Take a look at the codepen above and you should see the definition for the circle SVG inside the HTML file.

看一下上面的代码笔，您应该在HTML文件中看到圆圈SVG的定义。

I’d advise going through the SVG documentation on MDN (linked above), and familiarizing yourself with it. D3 makes extensive use of SVG’s.

我建议您仔细阅读MDN上的SVG文档(上面已链接)，并熟悉它。 D3广泛使用SVG。

SVG中的G (The G in SVG)

There is a specific kind of SVG element called a G element. Similar to the way we defined the circle element above, we define this with

有一种特定的SVG元素称为G元素。 与我们上面定义圆形元素的方式类似，我们使用

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Using g to inherit presentation attributes -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" /> </g>
</svg>

Think of a g element as similar to a div element that is used as a container in HTML. They are both used to group certain elements.

可以将g元素视为与HTML中用作容器的div元素相似。 它们都用于对某些元素进行分组。

Read the MDN documentation for g here

在