Question

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

数据看起来像this（请参阅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>

最终图表看起来像这样： enter image description here

问题是：

为什么数字不匹配？为什么数据末尾有大幅下降？数据的表示似乎不一致，并且这个库没有用这样的bug发布。

感谢您提出任何指示

Answer 1

因为你正在x轴上绘制月份字段，所以酒窝是每个月的所有回报的总和，所以那些实际上是你看到的月总数（最后的下降可能是由于部分月份））。

我认为你可以在x上使用时间轴获得更多成功。您也不需要干净的轴代码。试试这个（我没有测试过这段代码，但它应该非常接近）：

 ReflectionToStringBuilder.toString( object2dArray );

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

1 个答案: