Question

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

<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>

我假设页面和图形将被完全加载，我将调试器语句放在底部，因为这是最后一行代码。但是，当页面暂停时，实际上并未创建图形。在调试器行之后，页面运行在凹坑库中的一堆函数来创建svg图。显然，之后的jQuery行不起作用，因为还没有要选择的元素。

我认为在javascript方面我缺少一些基本的东西。如何在 dimple完成它之后让我的jQuery只运行？

Answer 1

您正在提供draw功能作为CSV请求的回调。

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

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

（如果D3 / Dimple的图表draw()功能也是异步的，那么您需要在那个回调中执行此操作，如果它有一个，但是我不知道Dimple。）

Javascript函数排序

1 个答案: