d3.js v4 中的错误 - Angular4 中的仪表图

Question

我尝试实现仪表图但出现错误。

我已经在小提琴中尝试过，并尝试在 angular2 中实现相同的功能。 小提琴链接：- https://jsfiddle.net/wf0y2sLb/42/

Stackblitz 链接：https://stackblitz.com/edit/angular-nnypbb?file=app%2Fapp.component.ts

我已经在上面的 stackblitz 中尝试过，但它提供了错误。 错误“类型‘{}’上不存在属性‘配置’”

我正在尝试在 angular2 中实现工作量规。我无法弄清楚问题以及如何以角度完成任务。

请帮助我在 angular2 中修复此图表。

needle-gauge-Chart-Component.ts

import { Component,OnInit} from '@angular/core';
import * as d3 from "d3";

@Component({
  selector: 'app-needle-gauge-chart',
  templateUrl: './needle-gauge-chart.component.html',
  styleUrls: ['./needle-gauge-chart.component.css']
})

export class PrgNeedleGaugeChartComponent implements OnInit {
  constructor(public jsonDataService: PrgDataService, public injector: Injector) { }

  ngOnInit() {
this.buildNeedleGaugeChart();
  }

buildNeedleGaugeChart() {

var gauge = function(container, configuration) {
    var that = {};
    var config = {
        size                        : 710,
        clipWidth                   : 200,
        clipHeight                  : 110,
        ringInset                   : 20,
        ringWidth                   : 20,

        pointerWidth                : 10,
        pointerTailLength           : 5,
        pointerHeadLengthPercent    : 0.9,

        minValue                    : 0,
        maxValue                    : 10,

        minAngle                    : -90,
        maxAngle                    : 90,

        transitionMs                : 750,

        majorTicks                  : 5,
        labelFormat                 : d3.format('d'),
        labelInset                  : 10,

        arcColorFn                  : d3.interpolateHsl(d3.rgb('#e8e2ca'), d3.rgb('#3e6c0a'))
    };
    var range = undefined;
    var r = undefined;
    var pointerHeadLength = undefined;
    var value = 0;

    var svg = undefined;
    var arc = undefined;
    var scale = undefined;
    var ticks = undefined;
    var tickData = undefined;
    var pointer = undefined;

    var donut = d3.pie();

    function deg2rad(deg) {
        return deg * Math.PI / 180;
    }

    function newAngle(d) {
        var ratio = scale(d);
        var newAngle = config.minAngle + (ratio * range);
        return newAngle;
    }

    function configure(configuration) {
        var prop = undefined;
        for ( prop in configuration ) {
            config[prop] = configuration[prop];
        }

        range = config.maxAngle - config.minAngle;
        r = config.size / 2;
        pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent);

        // a linear scale that maps domain values to a percent from 0..1
        scale = d3.scaleLinear()
            .range([0,1])
            .domain([config.minValue, config.maxValue]);

        ticks = scale.ticks(config.majorTicks);
        tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;});

        arc = d3.arc()
            .innerRadius(r - config.ringWidth - config.ringInset)
            .outerRadius(r - config.ringInset)
            .startAngle(function(d, i) {
                var ratio = d * i;
                return deg2rad(config.minAngle + (ratio * range));
            })
            .endAngle(function(d, i) {
                var ratio = d * (i+1);
                return deg2rad(config.minAngle + (ratio * range));
            });
    }
    that.configure = configure;

    function centerTranslation() {
        return 'translate('+r +','+ r +')';
    }

    function isRendered() {
        return (svg !== undefined);
    }
    that.isRendered = isRendered;

    function render(newValue) {
        svg = d3.select(container)
            .append('svg:svg')
                .attr('class', 'gauge')
                .attr('width', config.clipWidth)
                .attr('height', config.clipHeight);

        var centerTx = centerTranslation();

        var arcs = svg.append('g')
                .attr('class', 'arc')
                .attr('transform', centerTx);

        arcs.selectAll('path')
                .data(tickData)
            .enter().append('path')
                .attr('fill', function(d, i) {
                    return config.arcColorFn(d * i);
                })
                .attr('d', arc);

        var lg = svg.append('g')
                .attr('class', 'label')
                .attr('transform', centerTx);
        lg.selectAll('text')
                .data(ticks)
            .enter().append('text')
                .attr('transform', function(d) {
                    var ratio = scale(d);
                    var newAngle = config.minAngle + (ratio * range);
                    return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')';
                })
                .text(config.labelFormat);

        var lineData = [ [config.pointerWidth / 2, 0], 
                        [0, -pointerHeadLength],
                        [-(config.pointerWidth / 2), 0],
                        [0, config.pointerTailLength],
                        [config.pointerWidth / 2, 0] ];
        var pointerLine = d3.line().curve(d3.curveLinear)
        var pg = svg.append('g').data([lineData])
                .attr('class', 'pointer')
                .attr('transform', centerTx);

        pointer = pg.append('path')
            .attr('d', pointerLine/*function(d) { return pointerLine(d) +'Z';}*/ )
            .attr('transform', 'rotate(' +config.minAngle +')');

        update(newValue === undefined ? 0 : newValue);
    }
    that.render = render;
    function update(newValue, newConfiguration) {
        if ( newConfiguration  !== undefined) {
            configure(newConfiguration);
        }
        var ratio = scale(newValue);
        var newAngle = config.minAngle + (ratio * range);
        pointer.transition()
            .duration(config.transitionMs)
            .ease(d3.easeElastic)
            .attr('transform', 'rotate(' +newAngle +')');
    }
    that.update = update;

    configure(configuration);

    return that;
};

    var powerGauge = gauge('#power-gauge', {
        size: 300,
        clipWidth: 300,
        clipHeight: 300,
        ringWidth: 60,
        maxValue: 10,
        transitionMs: 4000,
    });
    powerGauge.render();
  }
}

Answer 1

这是一个非常丑陋的解决方案，但这是我个人不喜欢 JS 的一个原因 :) 问题是你不能从这个上下文中引用 this，因为它是一种回调。 你可以做到这一点：

var self = this;
var gauge = function (container, configuration) {
 ...
 self.gaugemap.configure = configure;
 ... // all other this. should be replaced by self.
}

并将所有对this 的引用替换为self。

工作样本：https://stackblitz.com/edit/angular-tjk9sl?file=app/app.component.ts

Answer 2

上面的答案是正确的，但是我想更新它：-

https://stackblitz.com/edit/angular-3ettqa?file=app/app.component.ts