d3js単純なドーナツチャートでは描画パスがありません

Question

私の質問によると、私の<g>要素はクラス ".arc"で挿入されていますが、パスはありません。どんなアイデアを私は見逃しましたか？

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 console.log(d.taux); 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; 
     }); 
} 

Answer 1

あなただけ間違いの カップルを持っています。 d3.arc()は機能ではなく、 arcは d3.svgの一部です。また pieは d3.layout の一部です（Gerardo Furtadoのおかげで、明らかにd3 v4 apiが平坦になっています）。

、メインエラーがでなければなりません円グラフのvalue機能である：

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>

Answer 2

あなたのコード内で唯一の間違った部分はこれです：

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

次のうちどれですか：

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

これは何ですか：returnはセミコロンで停止します。それで、console.logが返されます。あなたが何かをCONSOLE.LOGしたい場合は、前リターンにそれを実行します。

.value(function(d) { console.log(d.taux); 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 
 
     } 
 
    ]; 
 

 

 
    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>