D3滑块仅占div的一小部分

Question

我正在遵循this为应用程序创建X轴，以便用户可以为X选择一个值。

我添加了这个：

<div id="slider" class="epoch-axis-width epoch-axis-holder-border bottom-position"></div>

  <script>
      var slider = d3
          .sliderHorizontal()
          .min(0)
          .max(10)
          .step(1)
          .width(300)
          .fill("#008B8B")
          .displayValue(false)
          .on('onchange', val => {
          d3.select('#value').text(val);
      });

      d3.select('#slider')
          .append('svg')
          .attr('width', 500)
          .attr('height', 100)
          .append('g')
          .attr('transform', 'translate(30,30)')
          .call(slider);
  </script>

在CSS中：

.epoch-axis-width {
    width:95%;
}

.epoch-axis-holder-border {
    border:1px solid black;
    height: 50px
}

.bottom-position {
    position:absolute;
    bottom:10px;
    right:10px;
}

问题我的脸如下图所示：

可以看出，滑块仅占包含div的一小部分。我希望它能延伸到整个长度。