dimple.js Scatter Plot问题

时间:2014-11-07 02:14:15

标签: d3.js dimple.js

在下面的代码中,我绘制了一个散点图。我有几个问题。 渲染图表可在此处找到:http://jsfiddle.net/dizzy0ny/ch2187dd/4/

   var data1 = [
      {"x":0.123,"y":0.046},
      {"x":0.032,"y":-0.0345},
      {"x":-0.044,"y":-0.0505},
      {"x":0.05,"y":0.076},
      {"x":0.04,"y":0.036},
      {"x":-.034,"y":0.029},
      {"x":-.023,"y":0.087},
      {"x":0.034,"y":0.067},
      {"x":0.024,"y":0.048},
      {"x":0.087,"y":-0.09},
    ]; 
    var svg = dimple.newSvg("#chartContainer", 600,600);

      var myChart = new dimple.chart(svg);
      myChart.setBounds(90, 35, 480, 400)
      xAxis = myChart.addCategoryAxis("x", "x");
      yAxis = myChart.addCategoryAxis("y", "y");
      xAxis.showGridlines = true;
      yAxis.showGridlines = true;
      xAxis.tickFormat = '%'
      yAxis.tickFormat = '%'
      yAxis.ticks = 5 
      xAxis.ticks = 5 
      s1 = myChart.addSeries("Price Tier", dimple.plot.bubble, [xAxis, yAxis]);
      s1.data = data1
      myChart.addLegend(90, 480, 330, 20, "left");
      myChart.draw();
  1. 为什么轴刻度属性不起作用?在上面我只想沿轴5个标签
  2. 在图表中注意,' 5%'和 3%'显示为标签两次。无论如何要防止这种情况?
  3. 注意图表中间的奇数垂直空白区域,其中' 0%'行应该是。为什么没有显示0%,为什么x轴上该点没有垂直线?
  4. 为什么没有在y垂直轴上划线(就像沿着标签上方的x轴看到的那样?
  5. 最后,有一种简单的方法可以在此图表上绘制回归线吗?
  6. 非常感谢

1 个答案:

答案 0 :(得分:1)

您使用的是类别轴,它是不同值的序数轴。这就是您描述的行为的原因,它们被视为文本值而不是数字。尝试使用这样的测量轴:

xAxis = myChart.addMeasureAxis("x", "x");
yAxis = myChart.addMeasureAxis("y", "y");

您还需要调整系列以包含x和y尺寸,否则它们将被聚合:

s1 = myChart.addSeries(["x", "y", "Price Tier"], dimple.plot.bubble, [xAxis, yAxis]);

这是有效的。

http://jsfiddle.net/ch2187dd/5/

回归线是一个单独的问题,没有开箱即用的方法,你需要手动计算点数。