0

では、データによってはD3を使ってアークを描きたいと思います。ただし、値を関数として渡そうとすると失敗し、変数として渡すと機能します。

フィドルを確認してください: http://jsfiddle.net/paulocoelho/WyABt/1/

コードは次のとおりです。

var a = [[0.1, 0.4],[0.4,0.56],[0.56,1]];

var cfg = {
    w:200,
    h:200
};

var g = d3.select("#testdiv").append("svg").attr("width", cfg.w).attr("height", cfg.h).append("g")

var arct = d3.svg.arc()
        .innerRadius(cfg.h / 4)
        .outerRadius(cfg.h / 3)
        .startAngle(0)
        .endAngle(Math.PI);

// This one works
var path = g.selectAll("circleArcs").data(a).enter().append("svg:path")
    .attr("d", arct)
    .style("fill","blue")
    .attr("transform", "translate("+cfg.w/2+","+cfg.h/2+")");

// This one does not!
var path2 = g.selectAll("circleArcs").data(a).enter().append("svg:path")
    .attr("d", function(d,i){ return arct;})
    .style("fill","green");

したがって、現在データは接続されていませんが、ここでの私のポイントは、まったく同じオブジェクトを渡してarctいるが、関数の戻り値を通過するオブジェクトが機能していないということです...

4

1 に答える 1

1

arct最初の で が使用されると、pathd3.attrは関数を呼び出しarctます。

selection.attr(名前[, 値]

...値が関数の場合、選択された要素ごとに(順番に)関数が評価されます[強調が追加されます]...

しかし、path2が外側arctの関数内で返されると、外側の関数が.attr実行されますが、内側の関数は自動的に呼び出されません。arct

これが改訂されたフィドルです...

http://jsfiddle.net/pnQKY/2/

var path2 = g.selectAll("circleArcs").data(a).enter().append("svg:path")
    .attr("d", function(){ 
        // console.log( typeof arct ); // "function": returns function reference, which does not get invoked inside of the outer function
        // console.log( typeof arct() ); // "string": returns value of invoked function 
        return arct();
     })
    .style("fill","green");
     ...

これが出発点として役立つことを願っています。

于 2013-05-20T22:19:16.737 に答える