Question

我是javascript和d3.js的新手。我正在尝试创建饼图。 I want to create something like this. 我正在使用d3.js.我想加厚其中一个弧线。我无法发现这样做。我只想加厚“订婚”项目。它与百分位数无关。

这是我的js代码：

var engaged = 10;
var notEngaged = 50;
var maybeEngaged = 50;

var engagedYuzdelik = (100*engaged)/(engaged+notEngaged+maybeEngaged);
var notEngagedYuzdelik = (100*notEngaged)/(engaged+notEngaged+maybeEngaged);
var maybeEngagedYuzdelik=(100*maybeEngaged)/(engaged+notEngaged+maybeEngaged);

var dataset = [
        { name: 'Engaged', percent: [engagedYuzdelik.toFixed(2)] },
        { name: 'Not Engaged', percent: [notEngagedYuzdelik.toFixed(2)] },
        { name: 'Maybe Not Engaged', percent: [maybeEngagedYuzdelik.toFixed(2)] },

    ];

    var pie=d3.layout.pie()
            .value(function(d){return d.percent})
            .sort(null);

    var w=300,h=300;
    var radius = Math.min(w, h) / 2;

    var outerRadius=w/2;
    var innerRadius=100;

    var color = d3.scale.ordinal()
    .range(["#65A6BF", "#9AC4D7", "#CCE2EA"]);

    var arc=d3.svg.arc()
             .outerRadius(radius - 50)
             .innerRadius(radius - 60);

    var svg=d3.select("#chart")
            .append("svg")
            .attr({
                width:w,
                height:h,
                class:'shadow'
            }).append('g')
            .attr({
                transform:'translate('+w/2+','+h/2+')'
            });
    var path=svg.selectAll('path')
            .data(pie(dataset))
            .enter()
            .append('path')
            .attr({
                d:arc,
                fill:function(d,i){
                    return color(d.data.name);
                }
            });

    path.transition()
            .duration(1000)
            .attrTween('d', function(d) {
                var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
                return function(t) {
                    return arc(interpolate(t));
                };
            });


    };

Answer 1

使圆弧绘制成为条件：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  </head>

  <body>
    <div id="chart"></div>
    <script>
      var engaged = 10;
var notEngaged = 50;
var maybeEngaged = 50;

var engagedYuzdelik = (100*engaged)/(engaged+notEngaged+maybeEngaged);
var notEngagedYuzdelik = (100*notEngaged)/(engaged+notEngaged+maybeEngaged);
var maybeEngagedYuzdelik=(100*maybeEngaged)/(engaged+notEngaged+maybeEngaged);

var dataset = [
        { name: 'Engaged', percent: [engagedYuzdelik.toFixed(2)] },
        { name: 'Not Engaged', percent: [notEngagedYuzdelik.toFixed(2)] },
        { name: 'Maybe Not Engaged', percent: [maybeEngagedYuzdelik.toFixed(2)] },

    ];

    var pie=d3.layout.pie()
            .value(function(d){return d.percent})
            .sort(null);

    var w=300,h=300;
    var radius = Math.min(w, h) / 2;

    var outerRadius=w/2;
    var innerRadius=100;

    var color = d3.scale.ordinal()
    .range(["#65A6BF", "#9AC4D7", "#CCE2EA"]);

    var thinArc = d3.svg.arc()
             .outerRadius(radius - 50)
             .innerRadius(radius - 60),
        thickArc = d3.svg.arc()
             .outerRadius(radius - 10)
             .innerRadius(radius - 100);

    var svg=d3.select("#chart")
            .append("svg")
            .attr({
                width:w,
                height:h,
                class:'shadow'
            }).append('g')
            .attr({
                transform:'translate('+w/2+','+h/2+')'
            });
    var path=svg.selectAll('path')
            .data(pie(dataset))
            .enter()
            .append('path')
            .attr({
                fill:function(d,i){
                    return color(d.data.name);
                }
            });

    path.transition()
            .duration(1000)
            .attrTween('d', function(d) {
                var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
                return function(t) {
                    if (d.data.name === "Maybe Not Engaged"){
                      return thickArc(interpolate(t));
                    } else {
                      return thinArc(interpolate(t));
                    }
                };
            });
    </script>
  </body>

</html>

d3.js只增加一个弧形

1 个答案: