javascript - xAxis ordinal() 不从左 Angular 开始

Question

我一直在研究图表，这是 fiddle : https://jsfiddle.net/lucksp/crwb4v5u/

我有基于 15 分钟增量的 X 轴和条形数据“箱”。

现在我有了垂直线工具提示，我注意到工具提示和条形图本身之间的 0:00 时间不一样:第一个刻度不是 0:00，行会说 1:00(取决于窗口的大小，因为它是基于父 div 的可变宽度)。

在这里您可以看到一个宽窗口:在这里您可以看到一个狭窄的窗口:窗口越窄，比例似乎越偏离。

示例数据:

[{"hour":"0:00","inProgress":3,"inQueue":0,"sum":3,"maxCapacity":6},{"hour":"0:15","inProgress":5,"inQueue":3,"sum":8,"maxCapacity":5}

设置比例:

xScale = d3.scale.ordinal()
      .domain(dataSet.map(function(d) {
        return d.hour;
      }))
      .rangeRoundBands([0, innerWidth], 0.1, 0);

设置 x 轴:

var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient('bottom')
      .tickSize(2)
      .tickValues(['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']);

附加轴:

g.append('g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0,' + innerHeight + ')')
  .call(xAxis);

创建栏:

g.selectAll('.bar')
  .data(dataSet)
  .enter().append('rect')
  .attr('class', function(d, i) {
    return 'bar inProgress_inQueue';
  })
  .attr('id', function(d, i) {
    return 'bar_' + i + '_' + d.hour;
  })
  .attr('x', function(d) {
    return xScale(d.hour);
  })
  .attr('y', function(d) {
    return yScale(d.sum);
  })
  .attr('height', function(d) {
    return innerHeight - yScale(d.sum);
  })
  .attr('width', xScale.rangeBand())

要计算工具提示垂直线与数据的交点，这似乎正确地从图表的最左侧开始:

.on('mousemove', function(d, i) {
    if (d3.select('.tooltip-table')) {
      d3.select('.tooltip-table').remove();
    }
    var yPos = d3.mouse(this)[1];
    var xPos = d3.mouse(this)[0];
    var leftEdges = xScale.range();
    var width = xScale.rangeBand();
    var j;
    for (j = 0; xPos > (leftEdges[j] + width); j++) {}
    //do nothing, just increment j until case fails
    var selected;
    i = bisectDate(dataSet, leftEdges[j]); // returns the index to the current data item
    if (j < dataSet.length) {
      selected = (dataSet[j]);
    } else {
      return false;
    }

我尝试通过编辑来改变条形的开始:

.attr('x', function(d) {
    return xScale(d.hour) - margin.left; // but this does not work
  })

我在 xScale 上有 0 个 outerpadding。

什么设置不正确使图表左右移动？

再次感谢。

Answer 1

只需在 xScale 中将 .rangeRoundBands 更改为 .rangeBands，如下所示:

xScale = d3.scale.ordinal()
  .domain(dataSet.map(function(d) {
    return d.hour;
  }))
  .rangeBands([0, width], 0.1, 0);

另请注意，.rangeBands 还有另一个参数，即外部填充。