0

基本的にいくつかの円弧で構成される非常に基本的な D3 SVG があります。

何を使用しても（attr、attrTween、および呼び出し）、コールバックの最初の引数を介してデータを取得できないようです-常にnullが返されます（パスがレンダリングされても、何らかの解析エラーだと思います正しく？）

私は図書館に比較的慣れていないので、基本的なことを見落としているかもしれません...

var el      = $('#graph'),
                        width   = 280,
                        height  = 280,
                        twoPi   = Math.PI * 2,
                        total   = 0;

                    var arc = d3.svg.arc()
                        .startAngle(0)
                        .innerRadius(110)
                        .outerRadius(130),

                        svg = d3.select('#graph').append("svg")
                            .attr("width", width)
                            .attr("height", height)
                        .append("g")
                            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),

                        meter = svg.append('g').attr('class', 'progress');

                    /* Add Meter Background */

                    meter.append('path')
                        .attr('class', 'background')
                        .attr('d', arc.endAngle(twoPi))
                        .attr('transform', 'rotate(180)');

                    /* Add in Icon */

                    meter.append('text')
                        .attr('text-anchor', 'middle')
                        .attr('class', 'fa fa-user')
                        .attr('y',30)
                        .text('')


                    /* Create Meter Progress */

                    var percentage  = 0.4,
                        foreground  = meter.append('path').attr('class', 'foreground')
                                        .attr('transform', 'rotate(180)')
                                        .attr('d', arc.endAngle(twoPi*percentage)),

                        setAngle    = function(transition, newAngle) {

                            transition.attrTween('d',     function(d,v,i) {
console.log(d,v,i)
                            });
                            /*transition.attrTween('d', function(d) { console.log(this)
                                var interpolate = d3.interpolate(d.endAngle, newAngle);
                                return function(t) { d.endAngle = interpolate(t); return arc(d); };
                            });*/

                        };


                    setTimeout(function() {
                        percentage = 0.8;
                        foreground.transition().call(setAngle, percentage*twoPi);
                    },2000);

問題があると思われるのは、次のコード ブロックです。

transition.attrTween('d', function(d,v,i) {
    console.log(d,v,i)
});

戻る:

undefined 0 "M7.959941299845452e-15,-130A130,130 0 0,1 76.4120827980215,105.17220926874317L64.65637775217205,88.99186938124421A110,110 0 0,0 6.735334946023075e-15,-110Z"

「d」を取得できないように見えるため、インターポレーターを使用して i 値を文字列として解析しようとしましたが、複数の NaN を持つ ad 属性を返す解析エラーがありました。

これは、円弧から計算された単純なパスであるため、非常に奇妙に思えますか???

4

1 に答える 1

1

D3 の基本的にすべてのコールバック (dここ) の最初の引数は、操作している DOM 要素にバインドされているデータ要素です。あなたの場合、データは何にもバインドされていないため、d未定義です。

ここでjsfiddle を更新して、遷移をアニメーション化し、円グラフの例に近づけました。表示するパーセンテージは、データとしてパスにバインドされます。次に、新しいデータをバインドし、円グラフの例と同じ方法でトゥイーンを作成するだけです。

meter.select("path.foreground").datum(percentage)
     .transition().delay(2000).duration(750)
     .attrTween('d', function(d) {
       var interpolate = d3.interpolate(this._current, d);
       this._current = interpolate(0);
       return function(t) {
         return arc.endAngle(twoPi*interpolate(t))();
       };
});
于 2013-11-13T10:15:37.067 に答える