Javascript D3径向布局的不同最大值

我必须实现像这样的D3布局。有人能告诉我如何为每个圆指定不同的最大值吗？ 示例：我希望第一个圆的值为200而不是100，第二个圆的值为400。 我知道如何全局更改最大值，但不知道如何更改每个圆的最大值

JSFiddle：

这是每个圆的最大值设置为200的代码（当值达到200时，第一个进度条将完成）：

---

}

查看您发布的链接上的

html

部分代码，在

rp3

中有一个示例。我尝试了这个方法，但以第一个圆圈为例，如果我添加.maxValue（200）属性，那么将显示的数据是39，而不是78…对于这些类型的问题，您应该给出一个有效的JSFIDLE。有很多东西要看。这是一个开始：

function radialProgress(parent) {
    var _data=null,
        _duration= 1000,
        _selection,
        _margin = {top:0, right:0, bottom:30, left:0},
        __width = 300,
        __height = 300,
        _diameter = 150,
        _label="",
        _fontSize=10;


var _mouseClick;

var _value= 0,
    _minValue = 0,
    _maxValue = 200;

var  _currentArc= 0, _currentArc2= 0, _currentValue=0;

var _arc = d3.svg.arc()
    .startAngle(0 * (Math.PI/180)); //just radians

var _arc2 = d3.svg.arc()
    .startAngle(0 * (Math.PI/180))
    .endAngle(0); //just radians


_selection=d3.select(parent);


function component() {

    _selection.each(function (data) {

        // Select the svg element, if it exists.
        var svg = d3.select(this).selectAll("svg").data([data]);

        var enter = svg.enter().append("svg").attr("class","radial-svg").append("g");

        measure();

        svg.attr("width", __width)
            .attr("height", __height);


        var background = enter.append("g").attr("class","component")
            .attr("cursor","pointer")
            .on("click",onMouseClick);


        _arc.endAngle(360 * (Math.PI/180))

        background.append("rect")
            .attr("class","background")
            .attr("width", _width)
            .attr("height", _height);

        background.append("path")
            .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
            .attr("d", _arc);

        background.append("text")
            .attr("class", "label")
            .attr("transform", "translate(" + _width/2 + "," + (_width + _fontSize) + ")")
            .text(_label);
       var g = svg.select("g")
            .attr("transform", "translate(" + _margin.left + "," + _margin.top + ")");


        _arc.endAngle(_currentArc);
        enter.append("g").attr("class", "arcs");
        var path = svg.select(".arcs").selectAll(".arc").data(data);
        path.enter().append("path")
            .attr("class","arc")
            .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
            .attr("d", _arc);

        //Another path in case we exceed 100%
        var path2 = svg.select(".arcs").selectAll(".arc2").data(data);
        path2.enter().append("path")
            .attr("class","arc2")
            .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
            .attr("d", _arc2);


        enter.append("g").attr("class", "labels");
        var label = svg.select(".labels").selectAll(".label").data(data);
        label.enter().append("text")
            .attr("class","label")
            .attr("y",_width/2+_fontSize/3)
            .attr("x",_width/2)
            .attr("cursor","pointer")
            .attr("width",_width)
            // .attr("x",(3*_fontSize/2))
            .text(function (d) { return Math.round((_value-_minValue)/(_maxValue-_minValue)*100) + "%" })
            .style("font-size",_fontSize+"px")
            .on("click",onMouseClick);

        path.exit().transition().duration(500).attr("x",1000).remove();


        layout(svg);

        function layout(svg) {

            var ratio=(_value-_minValue)/(_maxValue-_minValue);
            var endAngle=Math.min(360*ratio,360);
            endAngle=endAngle * Math.PI/180;

            path.datum(endAngle);
            path.transition().duration(_duration)
                .attrTween("d", arcTween);

            if (ratio > 1) {
                path2.datum(Math.min(360*(ratio-1),360) * Math.PI/180);
                path2.transition().delay(_duration).duration(_duration)
                    .attrTween("d", arcTween2);
            }

            label.datum(Math.round(ratio*200));
            label.transition().duration(_duration)
                .tween("text",labelTween);

        }

    });

    function onMouseClick(d) {
        if (typeof _mouseClick == "function") {
            _mouseClick.call();
        }
    }
}

function labelTween(a) {
    var i = d3.interpolate(_currentValue, a);
    _currentValue = i(0);

    return function(t) {
        _currentValue = i(t);
        this.textContent = Math.round(i(t));
    }
}

function arcTween(a) {
    var i = d3.interpolate(_currentArc, a);

    return function(t) {
        _currentArc=i(t);
        return _arc.endAngle(i(t))();
    };
}

function arcTween2(a) {
    var i = d3.interpolate(_currentArc2, a);

    return function(t) {
        return _arc2.endAngle(i(t))();
    };
}


function measure() {
    _width=_diameter - _margin.right - _margin.left - _margin.top - _margin.bottom;
    _height=_width;
    _fontSize=_width*.2;
    _arc.outerRadius(_width/2);
    _arc.innerRadius(_width/2 * .85);
    _arc2.outerRadius(_width/2 * .85);
    _arc2.innerRadius(_width/2 * .85 - (_width/2 * .15));
}


component.render = function() {
    measure();
    component();
    return component;
}

component.value = function (_) {
    if (!arguments.length) return _value;
    _value = [_];
    _selection.datum([_value]);
    return component;
}


component.margin = function(_) {
    if (!arguments.length) return _margin;
    _margin = _;
    return component;
};

component.diameter = function(_) {
    if (!arguments.length) return _diameter
    _diameter =  _;
    return component;
};

component.minValue = function(_) {
    if (!arguments.length) return _minValue;
    _minValue = _;
    return component;
};

component.maxValue = function(_) {
    if (!arguments.length) return _maxValue;
    _maxValue = _;
    return component;
};

component.label = function(_) {
    if (!arguments.length) return _label;
    _label = _;
    return component;
};

component._duration = function(_) {
    if (!arguments.length) return _duration;
    _duration = _;
    return component;
};

component.onClick = function (_) {
    if (!arguments.length) return _mouseClick;
    _mouseClick=_;
    return component;
}

return component;