Включая основные мелкие тики

AS вы можете видеть, что у меня есть список дат по оси 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/

источник

2016-05-04 sahil

http://bl.ocks.org/vjpgo/4689130 – sahil

Вы используете порядковую шкалу, которая будет использовать свои уникальные ценности и использовать их для вашей оси. В вашей скрипке вы можете видеть, что у вас есть повторяющиеся даты, и эти даты даже не заказываются. Проблема в том, что хотя некоторые даты выглядят одинаково, у них разные часы, минуты и секунды (вы можете наблюдать это, добавляя дополнительный формат к своей оси).

Чтобы достичь желаемого результата, вы должны использовать временную или линейную шкалу.

Поскольку ваши даты не разделены равным интервалом, их трудно отнести в приятном понимании. Вы можете найти обновленный 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)

, которые будут сроки заказаны и с осью с интервалом подскакивает.

источник

2016-05-11 22:11:37 torresomar

Мне понравилось это, но затем я получил ошибку диапазона диапазона, не определен, поэтому я прокомментировал, что диапазон диапазона, но теперь ничего не происходит на моей оси x нет ошибки ничего..пожалуйста tell //.attr("width ", xScale.rangeBand()) этот я прокомментировал – sahil

Да, поскольку d3.time.scale не имеет функции rangeBand, определяемой вашим кодом, выдается ошибка. Если вы прокомментируете определение атрибута width, оно не будет правильно отображать столбцы, так как элемент svg не будет иметь ширину. – torresomar

, так что делать тогда – sahil

Включая основные мелкие тики

ответ

Смежные вопросы