等待 d3 加载

Question

我正在使用 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 子句。我该怎么做？

Answer 1

您正在寻找 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>

等待 d3 加载

Wait for d3 to load

javascript

d3.js

when-js