をロードするために、D3のを待ちます -私は円グラフをロードするために<a href="https://d3js.org/" rel="nofollow">d3</a>を使用して円グラフを作成してい
var pie = new d3pie(
// pie control Json
);
これは、しかし、私はパイが完全にレンダリングされた後ロジックを行うために探しています素晴らしい取り組んでいます。しかし、これはそれだけでパイがあってもカントーとき句の中に、手順という点では動作しません
$.when(pie).done(function() {
// further logic to be completed after pie has loaded
});
-
私はそうのような（AJAX呼び出しを行うときのように）whendoneロジックを使用しようとしました完全に装填されていない。これどうやってするの？
あなたはonload callbackを探しています：
callbacks: {
onload: function(){
console.log('chart is loaded!');
}
}
完全なコードサンプル：
<html>
<head></head>
<body>
<div id="pieChart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="https://rawgit.com/benkeen/d3pie/master/d3pie/d3pie.min.js"></script>
<script>
var pie = new d3pie("pieChart", {
\t "header": {
\t \t "title": {
\t \t \t "text": "Lots of Programming Languages",
\t \t \t "fontSize": 24,
\t \t \t "font": "open sans"
\t \t },
\t \t "subtitle": {
\t \t \t "text": "A full pie chart to show off label collision detection and resolution.",
\t \t \t "color": "#999999",
\t \t \t "fontSize": 12,
\t \t \t "font": "open sans"
\t \t },
\t \t "titleSubtitlePadding": 9
\t },
\t "footer": {
\t \t "color": "#999999",
\t \t "fontSize": 10,
\t \t "font": "open sans",
\t \t "location": "bottom-left"
\t },
\t "size": {
\t \t "canvasWidth": 590,
\t \t "pieOuterRadius": "90%"
\t },
\t "data": {
\t \t "sortOrder": "value-desc",
\t \t "content": [
\t \t \t {
\t \t \t \t "label": "JavaScript",
\t \t \t \t "value": 264131,
\t \t \t \t "color": "#2484c1"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Ruby",
\t \t \t \t "value": 218812,
\t \t \t \t "color": "#0c6197"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Java",
\t \t \t \t "value": 157618,
\t \t \t \t "color": "#4daa4b"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "PHP",
\t \t \t \t "value": 114384,
\t \t \t \t "color": "#90c469"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Python",
\t \t \t \t "value": 95002,
\t \t \t \t "color": "#daca61"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "C+",
\t \t \t \t "value": 78327,
\t \t \t \t "color": "#e4a14b"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "C",
\t \t \t \t "value": 67706,
\t \t \t \t "color": "#e98125"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Objective-C",
\t \t \t \t "value": 36344,
\t \t \t \t "color": "#cb2121"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Shell",
\t \t \t \t "value": 28561,
\t \t \t \t "color": "#830909"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Cobol",
\t \t \t \t "value": 24131,
\t \t \t \t "color": "#923e99"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "C#",
\t \t \t \t "value": 100,
\t \t \t \t "color": "#ae83d5"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Coldfusion",
\t \t \t \t "value": 68,
\t \t \t \t "color": "#bf273e"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Fortran",
\t \t \t \t "value": 218812,
\t \t \t \t "color": "#ce2aeb"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Coffeescript",
\t \t \t \t "value": 157618,
\t \t \t \t "color": "#bca44a"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Node",
\t \t \t \t "value": 114384,
\t \t \t \t "color": "#618d1b"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Basic",
\t \t \t \t "value": 95002,
\t \t \t \t "color": "#1ee67b"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Cola",
\t \t \t \t "value": 36344,
\t \t \t \t "color": "#b0ec44"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Perl",
\t \t \t \t "value": 32170,
\t \t \t \t "color": "#a4a0c9"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Dart",
\t \t \t \t "value": 28561,
\t \t \t \t "color": "#322849"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Go",
\t \t \t \t "value": 264131,
\t \t \t \t "color": "#86f71a"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Groovy",
\t \t \t \t "value": 218812,
\t \t \t \t "color": "#d1c87f"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Processing",
\t \t \t \t "value": 157618,
\t \t \t \t "color": "#7d9058"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Smalltalk",
\t \t \t \t "value": 114384,
\t \t \t \t "color": "#44b9b0"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Scala",
\t \t \t \t "value": 95002,
\t \t \t \t "color": "#7c37c0"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Visual Basic",
\t \t \t \t "value": 78327,
\t \t \t \t "color": "#cc9fb1"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Scheme",
\t \t \t \t "value": 67706,
\t \t \t \t "color": "#e65414"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Rust",
\t \t \t \t "value": 36344,
\t \t \t \t "color": "#8b6834"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "FoxPro",
\t \t \t \t "value": 32170,
\t \t \t \t "color": "#248838"
\t \t \t }
\t \t ]
\t },
\t "labels": {
\t \t "outer": {
\t \t \t "pieDistance": 32
\t \t },
\t \t "inner": {
\t \t \t "hideWhenLessThanPercentage": 3
\t \t },
\t \t "mainLabel": {
\t \t \t "fontSize": 11
\t \t },
\t \t "percentage": {
\t \t \t "color": "#ffffff",
\t \t \t "decimalPlaces": 0
\t \t },
\t \t "value": {
\t \t \t "color": "#adadad",
\t \t \t "fontSize": 11
\t \t },
\t \t "lines": {
\t \t \t "enabled": true
\t \t },
\t \t "truncation": {
\t \t \t "enabled": true
\t \t }
\t },
\t "effects": {
\t \t "pullOutSegmentOnClick": {
\t \t \t "effect": "linear",
\t \t \t "speed": 400,
\t \t \t "size": 8
\t \t }
\t },
\t "misc": {
\t \t "gradient": {
\t \t \t "enabled": true,
\t \t \t "percentage": 100
\t \t }
\t },
\t callbacks: {
\t \t onload: function(){
\t \t console.log('chart is loaded!');
\t \t }
\t }
});
</script>
</body>
</html>