Question

我的环境设置就是这样。

Angular 4.1.2
Angular-CLI 1.0.0
@ types / d3 4.8.0
打字稿

我正在尝试将D3 V4与我的角度项目集成。我正在创建简单的饼图。但是我收到了这个错误。代码已经复制并粘贴from。只有改变而不是CSV加载器，我使用了JSON加载器。

private buildPieChart() {
    let svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        radius = Math.min(width, height) / 2,
        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    let color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    let pie = d3.pie()
        .sort(null)
        .value(function(d) { return +d['population']; });

    let path = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

    let label = d3.arc()
        .outerRadius(radius - 40)
        .innerRadius(radius - 40);

    d3.json("data.json", function(data) {
        console.log(data);

        let arc = g.selectAll(".arc")
            .data(pie(data))
            .enter().append("g")
            .attr("class", "arc");

        arc.append("path")
            .attr("d", path)
            .attr("fill", function (d) {
                return color(d.data.age);
            });

        arc.append("text")
            .attr("transform", function (d) {
                return "translate(" + label.centroid(d) + ")";
            })
            .attr("dy", "0.35em")
            .text(function (d) {
                return d.data.age;
            });
    });
}

当我为arc的属性'd'指定路径时，我收到错误。

arc.append("path")
    .attr("d", path)
    .attr("fill", function (d) {
        return color(d.data.age);
    });

并且从文本函数

返回年龄时也会出错

arc.append("text")
    .attr("transform", function (d) {
        return "translate(" + label.centroid(d) + ")";
    })
    .attr("dy", "0.35em")
    .text(function (d) {
        return d.data.age;
    });

Answer 1

在console中，您可能会发现它无法从data.csv或JSON文件中读取数据。尝试手动添加数据，例如：const dataset = [.......]; 而且比起let svg = d3.select("svg").data(dataset).enter()之类的东西，比你不需要做d3.json..... 但是如果你想从文件中读取数据并将其放到d3，那么你需要做的事情就像你需要做的那样 this.data = Object.keys(data).map(key => dataset[key]); const dataset = [this.data[0].age, this.data[0].populatin] ....（您可以将其与index放在一个数组中，以获取所有年龄和人口。）

Angular4，D3 V4＆amp;打字稿

1 个答案: