D3 入门简要指南

2019-05-17 08:00:00 · 飞浪

介绍然后，我们将提供一些“下一步”任务，以及更多信息和参考资料的链接。让我们开始吧。设置和验证有几种方法可以在您的机器上设置d3js环境，我们将在本节中探讨

介绍

然后，我们将提供一些“下一步”任务，以及更多信息和参考资料的链接。让我们开始吧。

设置和验证

有几种方法可以在您的机器上设置 d3js 环境，我们将在本节中探讨每种方法。

首先，您可以在原始<script>标签中使用 d3js，如下所示：

      <script src="https://d3js.org/d3.v5.min.js"></script>

这将公开一个d3全局变量，您可以通过键入以下内容来验证这一点

      console.log(d3.version);
    

在浏览器的控制台中。此语句将打印出您正在使用的 d3js 版本，在撰写本文时为5.9.2 。

第二种选择是通过包管理器（如npm或yarn）安装 d3js ，使用捆绑器创建一个捆绑包，然后相应地导入 d3。

      import * as d3 from "d3";
    

第三种选择是在 nodejs 中使用 d3js，如下所示：

      var d3 = require("d3");
    

为了本指南的简单性，我们使用第一种方法（使用<script>标签）来设置我们的环境。

概念

在深入研究之前，需要澄清 d3js 中的几个概念。典型的方法是将数据附加到 d3js 中的 DOM（文档对象模型）。在实际构建垂直条形图之前，我们将介绍d3-scale、d3-axis和“数据连接”模式。

使用 d3-scale 进行抽象数据到视觉表示的映射

直接使用 SVG（“可缩放矢量图形”）进行编程时，通常对简单矩形执行以下操作：

      <svg>
    <g>
        <rect x="0" y="0" height="100" width="50">
        </rect>
    </g>
</svg>
    

可以想象，在条形图中，我们需要创建许多<rect>元素，计算它们的属性，并将它们附加到<svg>元素。这本身就是一项艰巨的任务，而d3-scale可以帮助我们进行计算。根据官方文档，我们将对x使用scaleBand()方法，对y使用scaleLinear()方法。在我们的例子中，这些是用于计算矩形的x、y、高度和宽度属性的构建块。

我们将使用以下逻辑来创建x和y比例函数：

      var x = d3.scaleBand()
  .domain(DOMAIN_OF_DATA)
  .range([RANGE_LEFT, RANGE_RIGHT]);

var y = d3.scaleLinear()
  .domain([0, MAX_OF_VALUE_DATA])
  .range([RANGE_BOTTOM, RANGE_TOP]);
    

请注意，scales执行从domain到range的映射。

使用 d3-axis 渲染刻度的可读标记

除了矩形之外，我们还需要在条形图中添加 x 轴和 y 轴。这就是d3-axis派上用场的地方。我们希望有一个底部轴作为x 轴，一个左侧轴作为y 轴。以下是创建它们的代码片段：

      var xAxis = g => g
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(d3.axisBottom(x));

var yAxis = g => g
  .attr("transform", `translate(${margin.left},0)`)
  .call(d3.axisLeft(y));
    

请注意，SVG 坐标以左上角的点 (0, 0) 为起点。这意味着我们需要对 y 轴进行平移，以便逻辑 (0, 0) 位于左下角。有关 SVG 转换的更多详细信息，请参见此处。

数据连接模式及其用法

d3js 使用的最后一个概念是“数据连接”模式，乍一看可能有点奇怪。

      var svg = d3.select('svg');
var g = svg.append("g");

g.selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", d => x(d.name))
  .attr("y", d => y(d.value))
  .attr("height", d => y(0) - y(d.value))
  .attr("width", x.bandwidth());
    

本质上，上述代码片段使用给定的“数据”创建几个矩形元素，并相应地“连接”它们。然后它调用x和y比例函数将数据中的名称-值对映射到屏幕上正确的x和y坐标。它还计算每个矩形的高度和宽度属性。您可以通过查看 Chrome 开发者工具中的结果元素来验证结果，如下所示：

      <rect x="41.95402298850573" y="150.11923076923077" height="219.88076923076923" width="17.586206896551726"></rect>
    

网上有一些教程解释d3js中的这种模式，我个人最喜欢的是d3js作者的这篇文章。

把所有东西放在一起

了解了上述所有概念并准备好代码片段后，让我们将所有内容整合在一起以构建条形图。请注意，图表中有以下组件：

基于数据的文档中的矩形元素。
带有刻度和文本的 x 轴和 y 轴，它们建立在 x 和 y 比例函数之上。

在我们的 html 文件中，我们创建一个 svg 元素：

      <svg height="450" width="600"></svg>

在 javascript 中，我们首先定义数据变量：

      var data = [
  {name: "A", value: "0.08167"},
  {name: "B", value: "0.01492"},
  {name: "C", value: "0.02782"},
  {name: "D", value: "0.04253"},
  {name: "E", value: "0.12702"},
  {name: "F", value: "0.02288"},
  {name: "G", value: "0.02015"},
  {name: "H", value: "0.06094"},
  {name: "I", value: "0.06966"},
  {name: "J", value: "0.00153"},
  {name: "K", value: "0.00772"},
  {name: "L", value: "0.04025"},
  {name: "M", value: "0.02406"},
  {name: "N", value: "0.06749"},
  {name: "O", value: "0.07507"},
  {name: "P", value: "0.01929"},
  {name: "Q", value: "0.00095"},
  {name: "R", value: "0.05987"},
  {name: "S", value: "0.06327"},
  {name: "T", value: "0.09056"},
  {name: "U", value: "0.02758"},
  {name: "V", value: "0.00978"},
  {name: "W", value: "0.0236"},
  {name: "X", value: "0.0015"},
  {name: "Y", value: "0.01974"},
  {name: "Z", value: "0.00074"}
];
    

然后，我们定义高度、宽度、边距的常量变量：

      var</spa

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

D3 入门简要指南

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y));

var svg = d3.select('svg'); var g = svg.append("g"); g.selectAll("rect") .data(data) .join("rect") .attr("x", d => x(d.name)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth());

var data = [ {name: "A", value: "0.08167"}, {name: "B", value: "0.01492"}, {name: "C", value: "0.02782"}, {name: "D", value: "0.04253"}, {name: "E", value: "0.12702"}, {name: "F", value: "0.02288"}, {name: "G", value: "0.02015"}, {name: "H", value: "0.06094"}, {name: "I", value: "0.06966"}, {name: "J", value: "0.00153"}, {name: "K", value: "0.00772"}, {name: "L", value: "0.04025"}, {name: "M", value: "0.02406"}, {name: "N", value: "0.06749"}, {name: "O", value: "0.07507"}, {name: "P", value: "0.01929"}, {name: "Q", value: "0.00095"}, {name: "R", value: "0.05987"}, {name: "S", value: "0.06327"}, {name: "T", value: "0.09056"}, {name: "U", value: "0.02758"}, {name: "V", value: "0.00978"}, {name: "W", value: "0.0236"}, {name: "X", value: "0.0015"}, {name: "Y", value: "0.01974"}, {name: "Z", value: "0.00074"} ];