javascript - 当只有几个值时,Dimple Js 会重复刻度

标签 javascript d3.js dimple.js

当我只有一两个数据点时,dimple js 会重复相同的刻度。我怎样才能让它不这样做?

示例

Image of the below code. 1/1/1990 repeats multiple times

<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
  <script type="text/javascript">
    var svg = dimple.newSvg("body", 800, 600);
    var data = [
      { "Word":"1/2/1990", "Awesomeness":2000 },
      { "Word":"1/1/1990", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addTimeAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.line);
    chart.draw();
  </script>
</body>

最佳答案

通常您会设置 axis.ticks但是当使用时间轴时,您需要设置 timePeriodtimeInterval 。这将在数​​据集中每天设置一个刻度线。

var xAxis = chart.addTimeAxis("x", "Word");
xAxis.timePeriod = d3.time.days;
xAxis.timeInterval = 1;
xAxis.tickFormat = "%A";
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.line);
chart.draw();

enter image description here

关于javascript - 当只有几个值时,Dimple Js 会重复刻度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28246202/

相关文章:

javascript - 如何统计点击的节点数?

javascript - NVD3 Angular 指令回调触发得太早

javascript - 无法从 SVG 图像元素加载图像

d3.js - Dimple.js 如何自定义 Y 轴上从 0 到 100 的值范围?

javascript - dimplejs 散点图中的结果错误

javascript - 操作内存中 jQuery 对象的 textarea 值

Javascript - 将带分隔符的文本拆分为多列

javascript - 是否可以通过 CloudFront CDN 进行 AWS 内容路由?

javascript - 为什么 Object.create 没有按预期克隆属性?

javascript - Dimple.js:如何为分组条形图中的组背景着色?