Javascript 函数排序

Question

我有一个关于 javascript 函数如何在 HTML 中执行的基本问题。我正在使用 dimple.js 创建一个图表，并希望在通过 javascript 创建图表后 select 一个 svg 元素。然而，即使我的 jQuery selector 是我页面上的最后一段脚本，它也不会执行，因为实际上还没有创建凹坑图。这是我正在使用的代码：

<html>
  <head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
      function draw(data) {

          "use strict";
          var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

          d3.select("body")
            .append("h2")
            .text("World Cup Attendance")

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          myChart.addMeasureAxis("y", "attendance");
          x.dateParseFormat = "%Y";
          x.tickFormat = "%Y";
          x.timeInterval = 4;
          myChart.addSeries(null, dimple.plot.line);
          myChart.addSeries(null, dimple.plot.scatter);
          myChart.draw();
        };

    </script>
  </head>
<body>
  <script type="text/javascript">
  d3.tsv("world_cup.tsv", draw);
  debugger
  $('.example').doSomething();
  </script>
</body>
</html>

我假设页面和图形会完全加载，因为我将调试器语句放在底部，因为那是代码的最后一行。然而，当页面在那里暂停时，图表实际上并没有被创建。在调试器通过 dimple 库中的一组函数将页面运行s 行后，以创建 svg 图形。显然紧随其后的 jQuery 行不起作用，因为 select 还没有元素。

我认为在 javascript 方面我遗漏了一些基本的东西。如何让我的 jQuery 变成运行只有在酒窝完成它的事情之后？

Answer 1

您正在提供 draw 函数作为 CSV 请求的回调。

draw画完了。所以把它放在那里，或者创建一个按顺序调用它们的小匿名函数，例如，

d3.tsv("world_cup.tsv", function() {
  draw();
  $('.example').doSomething();
);

(如果 D3/Dimple 的图表 draw() 函数也是异步的，那么您需要在 that 回调中执行此操作，如果它有一个, 但我不认识酒窝。)

Javascript 函数排序

Javascript Function Ordering

html

javascript

jquery

svg

dimple.js