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; });

这是您的工作代码：

＆＃13;
＆＃13;
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();
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

d3js简单的圆环图没有绘制路径

2 个答案: