Does it work along to Angular 8 + latest d3?

[pedroccg]

I can't build your source code with success.

Maybe its my angular version?

[Robouste]

Check last commit date, this project is dead

[ghost]

It is currently using almost the latest version of "nvd3": "^1.8.5" which is 1.8.6 which support "d3": "~5.5.0". and the latest version of "d3" is 5.11.0 .. I belive that this plugins suports the latest angular 8 version, but since it doesn`t have @types you'll have to know all necessary properties to create your specific graph. Check nvd3 documentation to understand the properties

    var newarc = d3.svg.arc()

      .innerRadius(innerRadius - (30 * value))
      .outerRadius(outerRadius)
      .startAngle(function (d, i) {
        return radians * i
      })
      .endAngle(function (d, i) {
        return radians * (i + 1)
      });

    d3.selectAll("nvd3").attr("d", newarc);


    let mode = "count"

// The secret for this to work properly relies on OPTIONS parameter

this.options = {
      chart: {
        type: "sunburstChart",
        height: 1000,
        duration: 350,
        dispatch: {},
        sunburst: {
          dispatch: {},
          // width: 600,
          height: 1000,
          // mode: mode,
          mode: "value",
          //id: 3837,
          duration: 0,
          groupColorByParent: true,
          showLabels: true,
          labelFormat: function (d, i ,k) { //console.log("LABEL", d, i , k);
           if (mode === 'count') {  return d.name.replace(/#.*#/,"") } else { return d.name.replace(/#.*#/,"") + ' ' + (d.value || d.size) } },
          labelThreshold: 0.6,
          margin: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
          }
        },
 tooltip: {
          duration: 0,
          gravity: "w",
          distance: 25,
          snapDistance: 0,
          classes: ["tooltipStyle"],
          chartContainer: document.querySelectorAll("#nvtooltip")[0],
          enabled: true,
          hideDelay: 150,
          headerEnabled: true,
          headerFormatter: function (d,i,k) {
            //console.log("HEADER",d,i,k);
            //return d;
          },
   fixedTop: null,
          offset: {
            left: 0,
            top: 0
          },
          hidden: false,
          data: null,
          id: "nvtooltip"
        },
        // width: 600,
        mode: "value",
        // mode: mode,
        // {type: String,value: 'value',observer: 'modeChanged'},groupColorByParent: true,showLabels: true,
        labelThreshold: 0.11,
        margin: {
          top: 30,
          right: 20,
          bottom: 20,
          left: 20
        },
        noData: null,
        defaultState: null
      },
      title: {
        enable: false,
        text: "Grafico de vendas",
        className: "h4",
        css: {
          width: "600px",
          textAlign: "center"
        }
      },
      subtitle: {
        enable: false,
        text: "Write Your Subtitle",
        css: {
          width: "600px",
          textAlign: "center"
        }
      },
      caption: {
        enable: false,
        text: "Figure 1. Write Your Caption text.",
        css: {
          width: "600px",
          textAlign: "center"
        }
      },
      styles: {
        classes: {
          "with-3d-shadow": true,
          "with-transitions": true,
          gallery: false
        },
        css: {
          "-webkit-transform": "translate3d(0, 0, 0)",
          "-moz-transform": "translateZ(0)",
          "-ms-transform": "translateZ(0)",
          "-o-transform": "translateZ(0)",
          "transform": "translateZ(0)"
        }
      }

But I've manage to put this on work using Angular 7 with lazy loading, without a problem.