Question

好的，所以我想根据数据使用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，但通过函数返回的那个对象不起作用...

Answer 1

在第一个arct中使用path时，d3的.attr会调用arct函数。

selection.attr(name[, value]

...如果值是一个函数，那么每个都会评估函数 [强调添加] 选中的元素（按顺序）......

但在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");
     ...

希望这有助于作为一个起点。

D3JS无法接收功能？

1 个答案: