如何增加d3.js中的滑塊長度

Question

我正在使用滑塊在d3圖表上工作。我想增加滑塊的長度。

<div id="content"> 
<br> 
<!--<label class ="left" id="lblValue" text-align="left">&nbsp;&nbsp; Values: </label>--> 
<br> 
<label for="RAG" text-align="center">&nbsp;&nbsp; January -  December </label> 
    <br> 
<input type="range" name="dataset" value="RAG" in="1" max="12" step="1" onchange="getData" style="margin=0" width="100px"/> 
<br> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:left;margin-right:3px; margin-top=3px;">|<br/>1</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px;">|<br/>2</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px;">|<br />3</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px;">|<br />4</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px;">|<br />5</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px">|<br />6</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px">|<br />7</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />8</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />9</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />10</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />11</span> 
       <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />12</span> 

</div> 

我創建了一個搗鼓這個： http://jsfiddle.net/ThomsonKrish/KZGd5/1/

而且這將是巨大的，如果我可以對齊蜱點點，使其頂部立即顯示在滑塊下方的蜱。

Answer 1

寬度

而不是使用width=""使用樣式屬性來確定滑塊的寬度。

例如：

<input type="range" name="dataset" value="RAG" in="1" max="12" step="1" onchange="getData" style="margin: 0; width: 200px;"/> 

蜱定位

要改變刻度線的位置，你可以通過CSS一margin-top: -x;屬性適用於.tick類。