草庐IT

javascript - 通过 npm 安装 d3.js 对 Angular 2 TypeScript 项目有什么好处吗？

coder 2024-07-18 原文

TL;DR: d3.js 应该通过 npm 安装，输入也应该如此。接受的答案有详细信息。当我写这个问题时，我是 Angular 的新手。 npm 流程是标准流程:用于 tree-shaking、包管理、更新等

我有一个 Angular 2 项目(为简单起见，它是快速启动项目)，我正在导入 d3.js 版本 4。d3 没有 TypeScript 定义，因为它只是 javascript。

在 index.html 中，我添加了库:

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

在 typescript app.component.ts 中，我引用了 d3.select().... 它工作正常 - 画了一个圆圈:

d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");

Visual Studio Code 无法识别 d3，因此我从 DefinitelyTyped 安装类型 - 然后 IDE 识别 d3，并且我得到代码完成等:

typings install dt~d3 --save --global

现在，我尝试了第二个项目，但选择了 npm 路线，npm install --save d3 我可以通过 引用 d3.js index.html 中的 node_modules 使用 

<script src="node_modules/d3/build/d3.min.js"></script>

但是，我不明白为什么要在这种情况下使用 npm？我没有在 component.ts 文件中使用 d3 的 import 语句，而且它工作正常。也许我在这里遗漏了什么？

最佳答案

到目前为止，您基本上可以通过以下两个基于 import 的选项来使用 D3 版本 4(始终以使用 TypeScript 2 为条件):

选项 1(使用标准 D3 bundle )

  • npm install --save d3(安装 Standard D3 v4 Bundle 的正常方法)
  • npm install --save-dev @types/d3(安装标准 D3 v4 bundle 的定义)如果您正在构建，您应该使用 --save一个供其他 Angular 2 应用程序使用的库，以便库使用者可以在打字支持下进行开发)
  • 现在您可以使用 import * as d3 from 'd3'，例如在创建单例 D3 服务的模块中，根据需要将其注入(inject)组件。

选项 2(仅使用您需要的)

  • npm install --save d3-selection d3-transition d3-shape d3-scale 仅安装项目所需的模块
  • npm install --save-dev @types/d3-selection @types/d3-transition @types/d3-shape @types/d3-scale(安装匹配的定义。再次使用--save 而不是 --save-dev 取决于你的用例。)
  • 为方便起见，您现在可以将这些模块捆绑在一个 barrel 模块中 d3-bundle.ts

例如

// d3-bundle.ts    
export * from 'd3-selection';
export * from 'd3-transition';
export * from 'd3-shape';
export * from 'd3-scale';
  • 从包中导入(使用适当的相对路径)以创建单例 D3 服务，即 import * as d3 from './d3-bundle'

选项 2 下的方法本质上是 d3-ng2-service做。如果发布的服务不适合，它还可以让您了解如何构建自己的 D3 服务。当然，您可以随时提出改进建议。

我要说的是，在 angular-cli 中使用基于导入的选项变得更加容易，因为它已更改为用于模块加载/捆绑的 Webpack 2。

关于javascript - 通过 npm 安装 d3.js 对 Angular 2 TypeScript 项目有什么好处吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38269863/

javascriptTypeScriptcoded334d3.jsangularnpm

有关javascript - 通过 npm 安装 d3.js 对 Angular 2 TypeScript 项目有什么好处吗？的更多相关文章

  1. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  2. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  3. ruby - 通过 ruby​​ 进程共享变量 - 2

    我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是

  4. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  5. ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2

    我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

  6. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  7. 通过 MacPorts 的 RubyGems 是个好主意吗？ - 2

    从MB升级到新的MBP后，Apple的迁移助手没有移动我的gem。我这次是通过macports安装ruby​​gems，希望在下次升级时避免这种情况。有什么我应该注意的陷阱吗？ 最佳答案 如果你想把你的gems安装在你的主目录中(在传输过程中应该复制过来，作为一个附带的好处，会让你以你自己的身份运行geminstall，而不是root)，将gemhome:键设置为您在~/.gemrc中的主目录中的路径. 关于通过MacPorts的RubyGems是个好主意吗？，我们在StackOverf

  8. ruby - 通过 RVM 安装 Ruby 1.9.2 永远行不通! - 2

    当我执行>rvminstall1.9.2时一切顺利。然后我做>rvmuse1.9.2也很顺利。但是当涉及到ruby​​-v时..sam@sjones:~$rvminstall1.9.2/home/sam/.rvm/rubies/ruby-1.9.2-p136,thismaytakeawhiledependingonyourcpu(s)...ruby-1.9.2-p136-#fetchingruby-1.9.2-p136-#downloadingruby-1.9.2-p136,thismaytakeawhiledependingonyourconnection...%Total%Rece

  9. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  10. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的，而不是简单地从命令行执行的？例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上，我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

随机推荐