在dimple.js中进行图表绘制时的奇怪行为

Question

我正在使用dimplejs在我拥有的一些示例数据上创建折线图。

数据看起来像这样（请参见html部分，它存储在data.tsv ）。

d3.js = dimplejs.org/lib/d3.v3.4.8.js

酒窝代码是：

<head>
  <script src="d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
  <script type="text/javascript">


 // Pass in an axis object and an interval.
 var cleanAxis = function (axis, oneInEvery) {
     // This should have been called after draw, otherwise do nothing
     if (axis.shapes.length > 0) {
         // Leave the first label
         var del = false;
         // If there is an interval set
         if (oneInEvery > 1) {
             // Operate on all the axis text
             axis.shapes.selectAll("text")
             .each(function (d) {
                 // Remove all but the nth label
                 if (del % oneInEvery !== 0) {
                     this.remove();
                     // Find the corresponding tick line and remove
                     axis.shapes.selectAll("line").each(function (d2) {
                         if (d === d2) {
                             this.remove();
                         }
                     });
                 }
                 del += 1;
             });
         }
     }
 };

    var svg = dimple.newSvg("body", 800, 600);

    d3.tsv("data.tsv", function (data) {
        var myChart = new dimple.chart(svg, data);

        myChart.setBounds(60, 30, 505, 305);
        var x = myChart.addCategoryAxis("x", "Month");
        x.addOrderRule("Date");
        var y  =myChart.addMeasureAxis("y", "Returns");
        y.overrideMax = 200;
        myChart.addSeries("Name", dimple.plot.line);
        myChart.addLegend(60, 10, 500, 20, "right");


        myChart.draw();

        cleanAxis(x, 20);


    });
    /*var data = [
      { "Word":"Hello", "Awesomeness":2000 },
      { "Word":"World", "Awesomeness":3000 }
    ];*/
    /*var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();*/
  </script>
</body>

最终图表如下所示： 在此处输入图片说明

问题是：

为什么数字不匹配？ 为什么数据末尾会出现大幅下降？ 数据的表示形式似乎不一致，并且该库没有发布带有此类错误的方法。

谢谢你的指点

Answer 1

因为您是在x轴上绘制“月”字段，所以酒窝会汇总每个月的所有回报，因此，这些实际上就是您所看到的月份总数（末尾的下降可能是由于月份不足所致）。

我认为使用x上的时间轴可能会获得更大的成功。 您也将不需要清洁轴代码。 试试这个（我还没有测试这段代码，但是应该很接近）：

var svg = dimple.newSvg("body", 800, 600);

d3.tsv("data.tsv", function (data) {
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 505, 305);
    myChart.addTimeAxis("x", "Date", "%m/%d/%Y", "%b-%Y");
    myChart.addMeasureAxis("y", "Returns");
    myChart.addSeries("Name", dimple.plot.line);
    myChart.addLegend(60, 10, 500, 20, "right");
    myChart.draw();
});

在dimple.js中进行图表绘制时的奇怪行为

问题描述

1 个解决方案

解决方案1
1 2015-05-19 09:47:22

在dimple.js中进行图表绘制时的奇怪行为

问题描述

1 个解决方案

解决方案1 1 2015-05-19 09:47:22

解决方案1
1 2015-05-19 09:47:22