js 是使用比较灵活的语言,语法 书写比较灵活,在js中function具有非常大的灵活性,function代码本身不仅允许被执行,还允许对值域范围内的代码进行扩展,支持在函数代码执行后再返回可继续执行的函数,同时可采用类似对象操作的方法对位函数增加属性或方法,参见示例:
function circularHeatChart() {
var margin = {top: 20, right: 20, bottom: 20, left: 20},
innerRadius = 50,
numSegments = 24,
segmentHeight = 20,
domain = null,
range = ["white", "red"],
accessor = function(d) {return d;},
radialLabels = segmentLabels = [];
function chart(selection) {
//==================在d3中选择器使用each进行选择器的遍历,对set、map对象使用forEach进行成员数据遍历===
selection.each(function(data) {
var svg = d3.select(this);
var offset = innerRadius + Math.ceil(data.length / numSegments) * segmentHeight;
g = svg.append("g")
.classed("circular-heat", true)
.attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");
var autoDomain = false;
//=========返回数组中的最大值、最小值,使用accessor的目的是为了具有扩展性=====
if (domain === null) {
domain = d3.extent(data, accessor);
autoDomain = true;
}
//====================可以用线性比例尺返回特定范围内的颜色值===========================
var color = d3.scale.linear().domain(domain).range(range);
if(autoDomain)
domain = null;
//=============这个图还不是很灵活,图形360度绘制的弧度数量=numSegment,当绘制的数据数量大于numSegment,逐层向外扩展绘制
g.selectAll("path").data(data)
.enter().append("path")
.attr("d", d3.svg.arc().innerRadius(ir).outerRadius(or).startAngle(sa).endAngle(ea))
.attr("fill", function(d) {return color(accessor(d));});
// Unique id so that the text path defs are unique - is there a better way to do this?
var id = d3.selectAll(".circular-heat")[0].length;
//Radial labels
var lsa = 0.01; //Label start angle
var labels = svg.append("g")
.classed("labels", true)
.classed("radial", true)
.attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");
labels.selectAll("def")
.data(radialLabels).enter()
.append("def")
.append("path")
.attr("id", function(d, i) {return "radial-label-path-"+id+"-"+i;})
.attr("d", function(d, i) {
var r = innerRadius + ((i + 0.2) * segmentHeight);
return "m" + r * Math.sin(lsa) + " -" + r * Math.cos(lsa) +
" a" + r + " " + r + " 0 1 1 -1 0";
});
labels.selectAll("text")
.data(radialLabels).enter()
.append("text")
.append("textPath")
.attr("xlink:href", function(d, i) {return "#radial-label-path-"+id+"-"+i;})
.style("font-size", 0.6 * segmentHeight + 'px')
.text(function(d) {return d;});
//Segment labels
var segmentLabelOffset = 2;
var r = innerRadius + Math.ceil(data.length / numSegments) * segmentHeight + segmentLabelOffset;
labels = svg.append("g")
.classed("labels", true)
.classed("segment", true)
.attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");
labels.append("def")
.append("path")
.attr("id", "segment-label-path-"+id)
.attr("d", "m0 -" + r + " a" + r + " " + r + " 0 1 1 -1 0");
labels.selectAll("text")
.data(segmentLabels).enter()
.append("text")
.append("textPath")
.attr("xlink:href", "#segment-label-path-"+id)
.attr("startOffset", function(d, i) {return i * 100 / numSegments + "%";})
.text(function(d) {return d;});
});
}
/* Arc functions */
ir = function(d, i) {
return innerRadius + Math.floor(i/numSegments) * segmentHeight;
}
or = function(d, i) {
return innerRadius + segmentHeight + Math.floor(i/numSegments) * segmentHeight;
}
sa = function(d, i) {
return (i * 2 * Math.PI) / numSegments;
}
ea = function(d, i) {
return ((i + 1) * 2 * Math.PI) / numSegments;
}
/* Configuration getters/setters */
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.innerRadius = function(_) {
if (!arguments.length) return innerRadius;
innerRadius = _;
return chart;
};
chart.numSegments = function(_) {
if (!arguments.length) return numSegments;
numSegments = _;
return chart;
};
chart.accessor = function(_) {
if (!arguments.length) return accessor;
accessor = _;
return chart;
};
return chart;
}
可使用变量赋值的方式调用函数circularHeatChart,调用完成后该变量既拥有了circularHeatChart的返回函数,可通过call等方式执行该变量,完成函数调用,示例代码:
var chart = circularHeatChart()
.segmentHeight(20)
.innerRadius(20)
.numSegments(24)
.radialLabels(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"])
.segmentLabels(["Midnight", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "Midday", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"])
.margin({top: 20, right: 0, bottom: 20, left: 280});
d3.select('#energychart')
.selectAll('svg')
.data([energyData])
.enter()
.append('svg')
.call(chart);
当然对函数对象chart的调用执行也可以采用这样的方式:
chart(d3.select('#energychart')
.selectAll('svg')
.data([energyData])
.enter()
.append('svg'))