等待d3加载

时间:2016-03-21 14:18:56

标签: javascript d3.js when-js

我正在使用d3创建一个饼图来加载饼图 -

var pie = new d3pie(

     // pie control Json

);

这很好用,但是我希望在馅饼完全渲染之后做逻辑。

我尝试使用when done逻辑(就像执行ajax调用时那样) -

$.when(pie).done(function () {
     // further logic to be completed after pie has loaded

});

然而,这不起作用,即使馅饼没有完全加载,它只是进入了when子句。我怎么能这样做?

1 个答案:

答案 0 :(得分:3)

您正在寻找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", {
	"header": {
		"title": {
			"text": "Lots of Programming Languages",
			"fontSize": 24,
			"font": "open sans"
		},
		"subtitle": {
			"text": "A full pie chart to show off label collision detection and resolution.",
			"color": "#999999",
			"fontSize": 12,
			"font": "open sans"
		},
		"titleSubtitlePadding": 9
	},
	"footer": {
		"color": "#999999",
		"fontSize": 10,
		"font": "open sans",
		"location": "bottom-left"
	},
	"size": {
		"canvasWidth": 590,
		"pieOuterRadius": "90%"
	},
	"data": {
		"sortOrder": "value-desc",
		"content": [
			{
				"label": "JavaScript",
				"value": 264131,
				"color": "#2484c1"
			},
			{
				"label": "Ruby",
				"value": 218812,
				"color": "#0c6197"
			},
			{
				"label": "Java",
				"value": 157618,
				"color": "#4daa4b"
			},
			{
				"label": "PHP",
				"value": 114384,
				"color": "#90c469"
			},
			{
				"label": "Python",
				"value": 95002,
				"color": "#daca61"
			},
			{
				"label": "C+",
				"value": 78327,
				"color": "#e4a14b"
			},
			{
				"label": "C",
				"value": 67706,
				"color": "#e98125"
			},
			{
				"label": "Objective-C",
				"value": 36344,
				"color": "#cb2121"
			},
			{
				"label": "Shell",
				"value": 28561,
				"color": "#830909"
			},
			{
				"label": "Cobol",
				"value": 24131,
				"color": "#923e99"
			},
			{
				"label": "C#",
				"value": 100,
				"color": "#ae83d5"
			},
			{
				"label": "Coldfusion",
				"value": 68,
				"color": "#bf273e"
			},
			{
				"label": "Fortran",
				"value": 218812,
				"color": "#ce2aeb"
			},
			{
				"label": "Coffeescript",
				"value": 157618,
				"color": "#bca44a"
			},
			{
				"label": "Node",
				"value": 114384,
				"color": "#618d1b"
			},
			{
				"label": "Basic",
				"value": 95002,
				"color": "#1ee67b"
			},
			{
				"label": "Cola",
				"value": 36344,
				"color": "#b0ec44"
			},
			{
				"label": "Perl",
				"value": 32170,
				"color": "#a4a0c9"
			},
			{
				"label": "Dart",
				"value": 28561,
				"color": "#322849"
			},
			{
				"label": "Go",
				"value": 264131,
				"color": "#86f71a"
			},
			{
				"label": "Groovy",
				"value": 218812,
				"color": "#d1c87f"
			},
			{
				"label": "Processing",
				"value": 157618,
				"color": "#7d9058"
			},
			{
				"label": "Smalltalk",
				"value": 114384,
				"color": "#44b9b0"
			},
			{
				"label": "Scala",
				"value": 95002,
				"color": "#7c37c0"
			},
			{
				"label": "Visual Basic",
				"value": 78327,
				"color": "#cc9fb1"
			},
			{
				"label": "Scheme",
				"value": 67706,
				"color": "#e65414"
			},
			{
				"label": "Rust",
				"value": 36344,
				"color": "#8b6834"
			},
			{
				"label": "FoxPro",
				"value": 32170,
				"color": "#248838"
			}
		]
	},
	"labels": {
		"outer": {
			"pieDistance": 32
		},
		"inner": {
			"hideWhenLessThanPercentage": 3
		},
		"mainLabel": {
			"fontSize": 11
		},
		"percentage": {
			"color": "#ffffff",
			"decimalPlaces": 0
		},
		"value": {
			"color": "#adadad",
			"fontSize": 11
		},
		"lines": {
			"enabled": true
		},
		"truncation": {
			"enabled": true
		}
	},
	"effects": {
		"pullOutSegmentOnClick": {
			"effect": "linear",
			"speed": 400,
			"size": 8
		}
	},
	"misc": {
		"gradient": {
			"enabled": true,
			"percentage": 100
		}
	},
	callbacks: {
		onload: function(){
		  console.log('chart is loaded!');
		}
	}
});
    </script>
  </body>

</html>
&#13;
&#13;
&#13;