• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Zweiter value in radialer progressbar

K

katzenklo

New member
Liebe Gemeinde,

ich habe eine radiale Progressbar welche mir den Status eines Projektes anzeigt.
Zum Einsatz kommt D3.js mit etwas Zusatzcode. Hier in codepen:
codepen

Ich möchte nun außer dem Prozentwert einen weiteren Wert für 'Euro' hinzufügen.
Dieser Wert soll ebenso von 0 weg aufgezählt werden, jedoch unabhängig von der SVG-Grafik sein.
(Der Prozentwert steuert ja den Ausschlag der SVG-Grafik).

Zum Einsatz kommt:
jQuery https://jquery.com/
D3.js D3.js - Data-Driven Documents
D3 Radial Progress D3 Autocomplete

Wäre echt toll wenn mir jemand weiterhelfen könnte, bin in JS leider nicht recht fit.
Vielen dank.
 
Die konkrete Frage lautet: Welchen Code muss ich in den 2 Skripten einfügen damit ich eine weitere Ausgabe einer Zahl welche von 0 aufzählt erreiche?
Diese Zahl sollte den Ausschlag der SVG-Grafik nicht beeinflussen und sollte ebenfalls in der Variable 'rp2' (ganz unten) einzugeben sein.

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


    var _mouseClick;

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

    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*100));
                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;

}

HTML: 
var div2=d3.select(document.getElementById('div2'));

    start();

    function onClick3() {
        deselect();
        div2.attr("class","selectedRadial");
    }

    function labelFunction(val,min,max) {

    }

    function deselect() {
        div2.attr("class","radial");
    }

    function start() {

        var rp2 = radialProgress(document.getElementById('div2'))
                .label("")
                .onClick(onClick3)
                .diameter(250)
                .minValue(100)
                .maxValue(200)
                .value(124)
                .value(168)
                .render();

    }

Bin leider wie gesagt nicht sehr mit JS vertraut und weiß deshalb nicht wie ich das hinbekomme.
Vielen dank.
 
Zuletzt bearbeitet von einem Moderator:
Bin mir nicht sicher, ob ich die Frage richtig verstanden habe. Ich würde jetzt mal sagen, du bräuchtest dafür in der function start(){} einfach nur einen zweiten Aufruf einfügen.

Hab die Tags mal in HTML geändert, weil dann auch Einrückungen erhalten bleiben. QUOTE ist wirklich nur für Zitate sinnvoll.
 
Vielen Dank für deine Hilfe. Ich kann auch ein Beispiel geben wie ich mir das vorstelle:
https://www.conda.de/crowdinvesting/deutschland/

Hier sieht man wie erstens der Prozentwert und zweitens der Eurowert von 0 weg aufzählen.
Im Grunde soll es bei mir genauso funktionieren, mir fehlt nur noch der Eurowert.

Ich habe es bereits in der
Code: 
function start(){}
probiert, jedoch weiß ich nicht was ich genau schreiben muss.
Einfach
Code: 
.value2(138)
hat natürlich nicht funktioniert da der Wert ja irgendwo übergeben werden muss.
Wie man sieht verstehe ich leider nicht sehr viel davon, wäre echt toll wenn mir jemand dabei helfen könnte.
 
Als Ansatzpunkt kannst du mal die Zeile .text(function (d) { return Math.round((_value-_minValue)/(_maxValue-_minValue)*100) + "%" }) in .text(function (d) { return Math.round((_value-_minValue)/(_maxValue-_minValue)*100) + "% " + _value + " EUR"; }) ändern.

Aber damit das gut aussieht musst du da wahrscheinlich ein zweites Textfeld hinzufügen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben