Question

你可以看到我在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/

Answer 1

您正在使用序数比例，它将使用您的唯一值并将其用于您的轴。在你的小提琴中你可以看到你有重复的日期，甚至没有订购这些日期。问题在于，即使某些日期看起来相同，它们也有不同的小时，分钟和秒（如果您向轴添加额外的格式，可以观看此内容）。

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

由于您的日期之间没有相等的间隔，因此很难以理解的方式呈现。您可以找到更新的jsfiddle here

 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)

将订购日期，并且轴间隔为跳跃。

包括主要的小蜱

1 个答案: