score:1

Accepted answer

You just have a couple of mistake. d3.arc() is not a function, arc is part of d3.svg; also pie is part of d3.layout (with thanks to Gerardo Furtado, Apparently in d3 v4 api has flattened).

And the main error is in value function of pie chart which should be:

this.pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.taux; });

function DonutChart(el) {
    var self = this;
    this.el = el;
    this.initChart();
}

DonutChart.prototype.initChart = function() {
    this.data = [
        {
            color: "#F57D28",
            taux: 25
        },
        {
            color: "FFB4E6",
            taux: 25
        },
        {
            color: "#50BE87",
            taux: 25
        },
        {
            color: "#F57D28",
            taux: 25
        }
    ];



  this.margin = {
        top: 5,
        right: 10,
        bottom: 5,
        left: 0
    };
    this.width = $(this.el).width() - this.margin.left - this.margin.right;
    this.height = $(this.el).height() - this.margin.top - this.margin.bottom;
    this.radius = Math.min(this.width,this.height)/2;

    var visWidth = $(this.el).width();
    var visHeight = $(this.el).height();

    this.svg = d3.select(this.el)
        .append('svg')
        .attr("class", 'DonutChart')
        .attr("width", visWidth)
        .attr("height", visHeight)
        .append('g')
        .attr('class','DonutChartLayer')
        .attr('transform', 'translate(' + visWidth/2 + ',' + visHeight/2 + ')');

    this.arc = d3.arc()
        .outerRadius(this.radius)
        .innerRadius(20);

   this.draw();

};

DonutChart.prototype.draw = function() {
    var self = this;

    this.pie = d3.pie()
        .sort(null)
        .value(function(d) {
          return d.taux;
        });

    this.g = self.svg.selectAll('.arc')
        .data(self.pie(self.data));

    this.g.enter().append("g")
        .attr("class", "arc");

    this.g.append("path")
        .attr("d", self.arc)
        .style("fill", function(d) {
            return d.data.color;
        });


};

var el = document.getElementById('chart-container');
var chart = new DonutChart(el);
chart.draw();
#chart-container {
  width: 300px;
  height: 300px;
}
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="chart-container"></div>
</body>

</html>

score:1

The only wrong part in your code is this:

.value(function(d) { return console.log(d.taux); d.taux; });

Which should be:

.value(function(d) { return d.taux; });

What happens is this: the return stops at the semicolon. So, it's returning the console.log. If you want to console.log something, do it before the return:

.value(function(d) { console.log(d.taux); return d.taux; });

Here is your working code:

function DonutChart(el) {
    var self = this;
    this.el = el;
    this.initChart();
}

DonutChart.prototype.initChart = function() {
    this.data = [
        {
            color: "#F57D28",
            taux: 25
        },
        {
            color: "FFB4E6",
            taux: 25
        },
        {
            color: "#50BE87",
            taux: 25
        },
        {   
            color: "#F57D28",
            taux: 25
        }
    ];


    var self = this;
    this.margin = {
        top: 5,
        right: 10,
        bottom: 5,
        left: 0
    }
    this.width = $(this.el).width() - this.margin.left - this.margin.right;
    this.height = $(this.el).height() - this.margin.top - this.margin.bottom;
    this.radius = Math.min(this.width,this.height)/2;

    var visWidth = $(this.el).width();
    var visHeight = $(this.el).height();

    this.svg = d3.select(this.el)
        .append('svg')
        .attr("class", 'DonutChart')
        .attr("width", visWidth)
        .attr("height", visHeight)
        .append('g')
        .attr('class','DonutChartLayer')
        .attr('transform', 'translate(' + visWidth/2 + ',' + visHeight/2 + ')');

    this.arc = d3.arc()
        .outerRadius(this.radius)
        .innerRadius(20);

   this.draw();

}

DonutChart.prototype.draw = function() {
    var self = this;

    this.pie = d3.pie()
        .sort(null)
        .value(function(d) { return d.taux; });

    this.g = self.svg.selectAll('.arc')
        .data(self.pie(self.data));

    this.g.enter().append("g")
        .attr("class", "arc");

    this.g.append("path")
        .attr("d", self.arc)
        .style("fill", function(d) {
            return d.data.color;
        });


}

var el = document.getElementById('chart');
new DonutChart(el).draw();
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<div id="chart" style="width:300px; height:300px;"></div>


Related Query

More Query from same tag