DimpleJS (D3) 中的基本四象限图

Question

我第一次尝试 DimpleJS 并试图画这样的东西：

有人知道我哪里出错了吗？似乎什么都没有出现。

window.onload = function() {

  var data = [
    {
      x:-1, 
      y:3
    }, {
      x:2, 
      y:-1.5
    }, {
      x:5, 
      y:2.5
    }
  ];
  
      var svg = dimple.newSvg("#chartContainer", 590, 400);
      var myChart = new dimple.chart(svg, data);
  
      dimple.filterData(data);
      myChart.addMeasureAxis("x");
      myChart.addMeasureAxis("y");
      myChart.draw();

};

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="chartContainer"></div>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
  </body>
</html>

Answer 1

您使用 filterData 的方式导致库崩溃，这就是什么都没有发生的原因。然后，当您更正将绘制轴但不会绘制任何内容时，您需要添加 series 来告诉 dimple 如何绘制数据。

如果一切都正确完成，那么您应该得到类似 this.

的内容

我以前没有使用酒窝的经验，但是为了创建这个酒窝，我使用了 this example and then this wiki 来了解不同方法如何协同工作。

DimpleJS (D3) 中的基本四象限图

Basic four quadrant plot in DimpleJS (D3)

javascript

d3.js

dimple.js