Question

在Angular 2.0.0-rc.4应用程序中导入和使用D3的正确方法存在很多差异。我见过：

1）要添加到根index.html文件：

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

然后使用：

Import * as d3 from 'd3';

在我想要实现D3视觉效果的任何组件文件中。

2）使用npm：

npm install d3 --save
typings install d3 --save

然后仍然使用：

Import * as d3 from 'd3';

虽然使用TypeScript 2.0.0 Beta（如果我正在阅读文档），我可以这样做：

npm install --save @types/d3

然后真的使用：

Import * as d3 from 'd3';

- 通过两种方式，将以下内容添加到{em> systemjs.config.js

的var map = { }

'd3':'node_modules/d3/d3.min.js'

并添加到var packages = { }

'd3':{main:'build/d3.js',defaultExtension:'js'}

任何人都可以确认实施D3的正确方法吗？谢谢。

Answer 1

对我有用的唯一方法是创建一个文件“custom-d3.ts”，在我导出我需要的内容中（例如）：

public static byte[] httpBuildQueryString(Map<String, Object> postsData) throws UnsupportedEncodingException {
    StringBuilder postData = new StringBuilder();
    for (Map.Entry<String,Object> param : postsData.entrySet()) {
        if (postData.length() != 0) postData.append('&');

        Object value = param.getValue();
        String key = param.getKey();

        if(value instanceof Object[] || value instanceof List<?>)
        {
            int size = value instanceof Object[] ? ((Object[])value).length : ((List<?>)value).size();
            for(int i = 0; i < size; i++)
            {
                Object val = value instanceof Object[] ? ((Object[])value)[i] : ((List<?>)value).get(i);
                if(i>0) postData.append('&');
                postData.append(URLEncoder.encode(key + "[" + i + "]", "UTF-8"));
                postData.append('=');            
                postData.append(URLEncoder.encode(String.valueOf(val), "UTF-8"));
            }
        }
        else
        {
            postData.append(URLEncoder.encode(key, "UTF-8"));
            postData.append('=');            
            postData.append(URLEncoder.encode(String.valueOf(value), "UTF-8"));
        }
    }
    return postData.toString().getBytes("UTF-8");
}

然后在我的其他ts文件中，我可以将d3导入为：export * from 'd3-axis'; export * from 'd3-format'; export * from 'd3-interpolate'; export * from 'd3-scale'; export * from 'd3-selection'; export * from 'd3-shape';。

我通过安装打字import * as d3 from '.../../custom-d3.ts'获得自动完成，而打字稿没有错误。

您也可以使用此库为您完成所有这些工作，并且可以在您的课程中注入：https://github.com/tomwanzek/d3-ng2-service

Answer 2

我不确定这是否是正确的方法，但在你的typings / index.d.ts文件中只添加/// <reference path="modules/d3/d3.d.ts" />.

之类的内容

我没有使用systemjs.config.js，我在组件中不需要任何其他导入语句，但似乎没有做到这一点，我没有得到任何红色错误。

将D3.js导入Angular 2应用程序的正确方法

2 个答案: