Question

我已经从Java迁移到AngularDart这个项目，我必须根据数据可视化一些数字和威胁级别。

我决定尝试使用显示数据属性的饼图片进行饼图/圆环形状，中心是将威胁级别显示为彩色圆圈。

我找到了一个旧的D3Dart软件包并将其用于我的第一次尝试。工作良好。我可以构建弧形，包括内半径和外半径，开始和结束角度等。

阅读有关如何构建的示例我受到启发，试图转移到d3 / d3.js，它（我猜）有更好的d3.js接口。我需要能够更好地控制我如何显示f.ex.替换DOM中的节点元素。

在使用import 'package:d3/d3.js' as d3;绑定导入包时 pub发送失败并显示以下消息：

> D:\apps\Dart\dart-sdk\bin\pub.bat serve web --port=54969 Loading
> source assets... Loading angular, test/pub_serve and
> dart_to_js_script_rewriter transformers... Serving SimplePie web on
> http://localhost:54969 [web] GET Served 2 assets. [web] GET styles.css
> => SimplePie|web/styles.css Build error: Transform BuilderTransformer: Instance of 'TemplatePlaceholderBuilder' on SimplePie|primary threw
> error: Error in <unknown source>: Illegal character '949'.
> 
> Error in <unknown source>: Illegal character '949'.

最后一行重复多次。我在导入中遗漏了什么

pubspec.yaml：

name: SimplePie
description: A web app that uses AngularDart Components
version: 0.0.1

environment:
  sdk: '>=1.24.0 <2.0.0'

dependencies:
  color: any
  angular: ^4.0.0
  angular_components: ^0.8.0
  d3: ^0.2.0

dev_dependencies:
  angular_test: ^1.0.0
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
  test: ^0.12.0

transformers:
- angular:
    entry_points:
      - web/main.dart
      - test/**_test.dart
- test/pub_serve:
    $include: test/**_test.dart
- dart_to_js_script_rewriter

当我添加d3 / d3.js时，我的dart代码片段失败：

import 'dart:html';
import 'dart:math' as Math;
import 'package:d3/d3.js' as d3;

import 'package:angular_components/angular_components.dart';
import 'package:angular/angular.dart';

@Component (
    selector: "pie-chart",
    templateUrl: 'pie_chart.html',
    directives: const[CORE_DIRECTIVES, materialDirectives],
    providers: const[materialProviders]
)

class SimplePie implements AfterViewInit {
    @ViewChild("containerPieChart")
    List<num> pieSliceList;
    num numberOfSlices;
    Math.Random random = new Math.Random();
    final num MAX_PIE_SLICE_SIZE = 20;
    num totalPieSize;
    num width;
    num height;
    num radius;
    num strokeWidth;
    var progressText;

    void ngAfterViewInit() {
        setup();
        totalPieSize = 0;
        for (num i = 0 ; i < random.nextInt(10) ; i++ ) {
            var value = random.nextInt(MAX_PIE_SLICE_SIZE);
            pieSliceList.add(value);
            totalPieSize += value;
        }
        numberOfSlices = pieSliceList.length;
        progressText = document.getElementById("progressText");
    }

    void setup () {
        this.width = 800;
        this.height = 800;
        this.strokeWidth = 3;
        this.radius = (Math.min(width, height) / 2) - 2 * strokeWidth;
    }
}

我使用IntelliJ IDE（最新）和Dart版本1.24.3。

试图在Angular dart中导入包d3 / d3.js。

0 个答案: