angularJS将d3js自定义甜甜圈指令转换为组件

Question

So I am trying to convert a directive to component. The directive basically renders a donut chart with legends when given an input dataset. Also when you hover on arc on donut I show popped up animation. The directive works absolutely fine. The problem is when I converted the directive to component. Please find the code below for component

(() => {
  angular
  .module('charts.donut-chart')
  .component('donutChart', {
    templateUrl: 'charts/donut-chart/donut-chart.html',
    controller: DonutChartController,
    bindings: {
      chartData: '=',
      chartColors: '=',
      chartHeight: '=',
      chartWidth: '=',
      legendHeight: '=',
      hover: '@',
      tooltips: '=',
      enableLegend: '=',
      id: '=',
    },
  });

  function DonutChartController ($document, donutOptionsFactory, $filter, $scope, $timeout, $window, $element, $attrs, $compile) {
    // console.log($element, $attrs);

    const d3 = $window.d3;

    const vm = this;

    const timestamp = new Date().getTime();

    vm.chartId = `donut_chart_${timestamp}`;

    const donutOptions = {
      chartWidth: vm.chartWidth,
      chartHeight: vm.chartHeight,
      legendHeight: vm.legendHeight,
    };

    // chart options
    let chartWidth;
    let chartHeight;
    let enableLegend;
    let legendHeight;
    let outerRadiusOfArc;
    let innerRadiusOfArc;
    let color;
    let arcColors;

    let pie;
    let arc;

    let svgContainer;
    let formattedDonutChartOptions;
    let svgElement;

    const deregistrationFn = $scope.$watch(() => $document[0].querySelector(`#${this.chartId}`), (newValue) => {
      if (newValue !== null) {
        deregistrationFn();
        svgContainer = d3.select(`#${vm.chartId}`);
        vm.initChartOptions();
        createChart();
        // bindMouseEvents();
      }
    });

    vm.initChartOptions = () => {
      formattedDonutChartOptions = donutOptionsFactory.getOptionsForDonutChart(donutOptions, svgContainer);
      chartWidth = formattedDonutChartOptions.chartWidth;
      chartHeight = formattedDonutChartOptions.chartHeight;
      enableLegend = formattedDonutChartOptions.enableLegend;
      legendHeight = formattedDonutChartOptions.legendHeight;
      outerRadiusOfArc = formattedDonutChartOptions.outerRadiusOfArc;
      innerRadiusOfArc = formattedDonutChartOptions.innerRadiusOfArc;
      color = formattedDonutChartOptions.chartColors;
    };

    function onArcMouseOver (d, path) {
      console.log('mouseover', d, path);
      d3.select(path).transition()
        .attr('d', d3.svg.arc()
          .innerRadius(outerRadiusOfArc * 1.5)
          .outerRadius(outerRadiusOfArc));
    }

    function onArcMouseOut (d, path) {
      console.log('mouseout', d, path);
      d3.select(path).transition()
          .duration(500)
          .ease('bounce')
          .attr('d', d3.svg.arc()
            .innerRadius(innerRadiusOfArc)
            .outerRadius(outerRadiusOfArc));
    }

    function createChart () {
      arcColors = d3.scale.ordinal()
        .range(color);

      pie = d3.layout.pie()
        .sort(null)
        .value(d => d.value);

      arc = d3.svg.arc()
        .innerRadius(innerRadiusOfArc)
        .outerRadius(outerRadiusOfArc);

      svgElement = svgContainer.append('svg')
        .attr('width', chartWidth)
        .attr('height', chartHeight)
        .append('g')
        .attr('transform', `translate(${chartWidth / 2}, ${chartHeight / 2})`);

      svgElement.selectAll('path')
        .data(pie(vm.chartData))
        .enter()
        .append('path')
        .attr('fill', (d, i) => arcColors(i))
        .attr('d', arc)
        .on('mouseover', (d, i, j) => {
          console.log(d, i, j, this);
          const ref = this;
          const dObject = d;
          // (() => {
          // onArcMouseOver(dObject, d3.select(this));
          // })(dObject, ref);
          d3.select(this).transition()
            .attr('d', d3.svg.arc()
              .innerRadius(outerRadiusOfArc * 1.5)
              .outerRadius(outerRadiusOfArc));
        })
        .on('mouseout', (d, i, j) => {
          console.log(d, i, j, this);
          // onArcMouseOut(d, d3.select(this));
          const ref = this;
          const dObject = d;
          // (() => {
          // onArcMouseOut(dObject, d3.select(this));
          // })(dObject, ref);
          d3.select(this).transition()
              .duration(500)
              .ease('bounce')
              .attr('d', d3.svg.arc()
                .innerRadius(innerRadiusOfArc)
                .outerRadius(outerRadiusOfArc));
        });
    }


    function bindMouseEvents () {
      /* function pathAnim (path, dir) {
        switch (dir) {
        case 0: // mouseout
          path.transition()
              .duration(500)
              .ease('bounce')
              .attr('d', d3.svg.arc()
                .innerRadius(innerRadiusOfArc)
                .outerRadius(outerRadiusOfArc));
          break;
        case 1:// mouseover
          path.transition()
            .attr('d', d3.svg.arc()
              .innerRadius(outerRadiusOfArc * 1.5)
              .outerRadius(outerRadiusOfArc));
          break;
        default: break;
        }
      }*/

      const eventObject = {
        mouseover (d) {
          console.log('mouseover', this, d);
          // pathAnim(d3.select(this), 1);
        },
        mouseout (d) {
          console.log('mouseout', this, d);
          // pathAnim(d3.select(this), 0);
        },
      };
      svgElement.on(eventObject);
    }
  }
})();

The template for above is

<div layout="row" id={{$ctrl.chartId}} layout-align="center center"></div>

The above component works fine and renders the donut graph as intended. The problem area is I am not able to do hover effects like the directive. I have tried two ways to bind mouse events. The first one is in separate using function bindMouseEvents() this function works and returns me the 'd' argument with all the startangle and endangle values for the arc but the this in these function is undefined or points to DonutController. The this should point to the hovered element which it does not.

So I tried second approach. I bind the events where I am appending the data to path section .on('mouseover', (d, i, j) => { . I assign anonymous call backs and from within it i trigger my own function passing the arguments to my own function. Here when I am debugging the code using chrome's debugger it shows me that this is pointing correctly to the hovered element but when I am passing it to my own function all the object values of this are being passed as empty or undefined and hence my animation fails.

So in the first approach I get the d object as necessary but the this is messed up and in the second approach i get the this properly but when I call my function and pass this to it, it is being passed as an empty object (object that has all keys but the value of those keys is either empty or undefined).

Can some one point out what I am messing up? Or any better way to convert my directive to component?

Thanks in advance

Answer 1

One of the primary reasons for fat-arrow notation is to preserve the this from the parent scope. So when you call it like:

.on('mouseover', (d, i, j) => {

this is preserved and d3 is not apply to inject the hovered element. Simple fix is to use a conventional function:

.on('mouseover', function(d, i, j){

Here's a working demonstration with your code:

 (() => { angular .module('charts.donut-chart') .component('donutChart', { template: "<div layout=\\"ro\\" id={{$ctrl.chartId}} layout-align=\\"center center\\"></div>", controller: DonutChartController, bindings: { chartData: '=', chartColors: '=', chartHeight: '=', chartWidth: '=', legendHeight: '=', hover: '@', tooltips: '=', enableLegend: '=', id: '=', }, }); function DonutChartController($document, $filter, $scope, $timeout, $window, $element, $attrs, $compile) { // console.log($element, $attrs); const d3 = $window.d3; const vm = this; const timestamp = new Date().getTime(); vm.chartId = `donut_chart_${timestamp}`; const donutOptions = { chartWidth: vm.chartWidth, chartHeight: vm.chartHeight, legendHeight: vm.legendHeight, }; // chart options let chartWidth; let chartHeight; let enableLegend; let legendHeight; let outerRadiusOfArc; let innerRadiusOfArc; let color; let arcColors; let pie; let arc; let svgContainer; let formattedDonutChartOptions; let svgElement; const deregistrationFn = $scope.$watch(() => $document[0].querySelector(`#${this.chartId}`), (newValue) => { if (newValue !== null) { deregistrationFn(); svgContainer = d3.select(`#${vm.chartId}`); vm.initChartOptions(); createChart(); } }); vm.initChartOptions = () => { //formattedDonutChartOptions = donutOptionsFactory.getOptionsForDonutChart(donutOptions, svgContainer); chartWidth = 500; //formattedDonutChartOptions.chartWidth; chartHeight = 500; //formattedDonutChartOptions.chartHeight; enableLegend = true; //formattedDonutChartOptions.enableLegend; legendHeight = 50; //formattedDonutChartOptions.legendHeight; outerRadiusOfArc = 250; //formattedDonutChartOptions.outerRadiusOfArc; innerRadiusOfArc = 200; //formattedDonutChartOptions.innerRadiusOfArc; color = ['red', 'green', 'yellow']; //formattedDonutChartOptions.chartColors; }; function onArcMouseOver(d, path) { console.log('mouseover', d, path); d3.select(path).transition() .attr('d', d3.svg.arc() .innerRadius(outerRadiusOfArc * 1.5) .outerRadius(outerRadiusOfArc)); } function onArcMouseOut(d, path) { console.log('mouseout', d, path); d3.select(path).transition() .duration(500) .ease('bounce') .attr('d', d3.svg.arc() .innerRadius(innerRadiusOfArc) .outerRadius(outerRadiusOfArc)); } function createChart() { arcColors = d3.scale.ordinal() .range(color); pie = d3.layout.pie() .sort(null) .value(d => d.value); arc = d3.svg.arc() .innerRadius(innerRadiusOfArc) .outerRadius(outerRadiusOfArc); svgElement = svgContainer.append('svg') .attr('width', chartWidth) .attr('height', chartHeight) .append('g') .attr('transform', `translate(${chartWidth / 2}, ${chartHeight / 2})`); svgElement.selectAll('path') .data(pie([{ value: 10 }, { value: 20 }, { value: 30 }])) .enter() .append('path') .attr('fill', (d, i) => arcColors(i)) .attr('d', arc) .on('mouseover', function(d, i, j) { d3.select(this).transition() .attr('d', d3.svg.arc() .innerRadius(outerRadiusOfArc * 1.5) .outerRadius(outerRadiusOfArc)); }) .on('mouseout', function(d, i, j) { d3.select(this).transition() .duration(500) .ease('bounce') .attr('d', d3.svg.arc() .innerRadius(innerRadiusOfArc) .outerRadius(outerRadiusOfArc)); }); } } })(); 

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="//code.angularjs.org/snapshot/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> <script src="index.js"></script> <script src="donutChart.js"></script> </head> <body ng-app="charts.donut-chart"> <!-- components match only elements --> <div ng-controller="MainCtrl as ctrl"> <donut-chart></donut-detail> </div> <script> (function(angular) { 'use strict'; angular.module('charts.donut-chart', []).controller('MainCtrl', function MainCtrl() { }); })(window.angular); </script> </body> </html>