包括主要的次要蜱虫

Including major minor ticks

本文关键字：包括主      更新时间：2023-09-26

正如你所看到的，我在x轴上有一个日期列表，我希望有主要的次要刻度，而不是像本例中给出的那样显示所有日期http://bl.ocks.org/vjpgo/4689130.这是我的html

<body>
  <div id="chart"></div>
  <div align="center">
    From :
    <input type="date" name="field1" id="field1" /> To :
    <input type="date" name="field2" id="field2" />
    <br />
    <br />
    <input type="button" onclick="render(true)" value="Submit" />
  </div>
  <label> List of Tables : </label>
  <br>
  <form name="myform" id="myForm">
    <div style="height: 30px; width: 50px;">
      <select id="dropdown1"></select>
    </div>
    <div style="margin-left: 150px; margin-top: -30px; height: auto;">
      <select id="listbox" , multiple></select>
    </div>
  </form>
</body>

这是我的链接小提琴显示

http://jsfiddle.net/k013yrgc/29/

您使用的是序数刻度，它将使用您的唯一值并将它们用于轴。在你的小提琴上，你可以看到你有重复的日期，而这些日期甚至没有顺序。问题是，尽管有些日期看起来一样，但它们有不同的小时、分钟和秒（如果你在坐标轴上添加额外的格式，你可以观看）。

如果你想达到你想要的输出，你应该使用时间或线性刻度。

由于你的约会间隔不相等，所以很难以一种很好的理解方式呈现。你可以在这里找到更新的jsfiddle

 var xScale = d3.time.scale().nice(d3.time.day).range([0, width]);
 var yScale = d3.scale.linear().range([height, 0]);
 var hAxis = d3.svg.axis().scale(xScale).orient('bottom')
     .ticks(10).tickSubdivide(3).tickSize(-10, -10, 0)

其将具有有序的日期并且具有带间隔跳跃的轴。

相关文章：