带有两个 Y 轴问题的水平堆积条形图答案

【问题标题】：Horizontal Stacked Bar Chart with Two Y Axis Issues带有两个 Y 轴问题的水平堆积条形图
【发布时间】：2017-04-04 01:23:08
【问题描述】：

我对我的图表有以下问题/疑问：

如何防止右 y 轴刻度值被部分删除或进入图表？
当我使用 yValuesTripId 作为左右 y 轴域的域时，图表绘制得很好。如何使用 yAxisFirstStopTimes 作为左 y 轴域值和 yAxisLastStopTimes 作为右 y 轴值来绘制它？

您可以点击here查看或编辑图表：

代码如下：

// source : https://gist.github.com/sidnan/20cf8ccf17f46534b101
d3.select("#chartDiv").select("svg").remove();
d3.select("#chartDiv").select("#legend").remove();

var dataset = [{
  "stopId": "29",
  "data": [{
    "yValue": "10100001",
    "xValue": 5,
    "time": "05:45:00",
    "stopId": "29",
    "passengers": 22
  }, {
    "yValue": "10100002",
    "xValue": 5,
    "time": "06:00:00",
    "stopId": "29",
    "passengers": 7
  }, {
    "yValue": "10100003",
    "xValue": 5,
    "time": "06:15:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "10100004",
    "xValue": 5,
    "time": "06:30:00",
    "stopId": "29",
    "passengers": 4
  }, {
    "yValue": "10100005",
    "xValue": 5,
    "time": "06:45:00",
    "stopId": "29",
    "passengers": 1
  }, {
    "yValue": "10100006",
    "xValue": 5,
    "time": "07:00:00",
    "stopId": "29",
    "passengers": 30
  }, {
    "yValue": "10100007",
    "xValue": 5,
    "time": "07:15:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "10100008",
    "xValue": 5,
    "time": "07:30:00",
    "stopId": "29",
    "passengers": 28
  }, {
    "yValue": "10100009",
    "xValue": 5,
    "time": "07:45:00",
    "stopId": "29",
    "passengers": 30
  }, {
    "yValue": "10101001",
    "xValue": 5,
    "time": "06:07:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "10101002",
    "xValue": 5,
    "time": "06:51:00",
    "stopId": "29",
    "passengers": 15
  }, {
    "yValue": "10101003",
    "xValue": 5,
    "time": "07:35:00",
    "stopId": "29",
    "passengers": 27
  }, {
    "yValue": "10101004",
    "xValue": 5,
    "time": "08:19:00",
    "stopId": "29",
    "passengers": 27
  }, {
    "yValue": "10110011",
    "xValue": 5,
    "time": "06:15:00",
    "stopId": "185",
    "passengers": 29
  }, {
    "yValue": "10110012",
    "xValue": 5,
    "time": "06:30:00",
    "stopId": "185",
    "passengers": 14
  }, {
    "yValue": "10110013",
    "xValue": 5,
    "time": "06:45:00",
    "stopId": "185",
    "passengers": 23
  }, {
    "yValue": "10110014",
    "xValue": 5,
    "time": "07:01:00",
    "stopId": "185",
    "passengers": 20
  }, {
    "yValue": "10110015",
    "xValue": 5,
    "time": "07:15:00",
    "stopId": "185",
    "passengers": 30
  }, {
    "yValue": "10110016",
    "xValue": 5,
    "time": "07:30:00",
    "stopId": "185",
    "passengers": 27
  }, {
    "yValue": "10110017",
    "xValue": 5,
    "time": "07:45:00",
    "stopId": "185",
    "passengers": 27
  }, {
    "yValue": "10110018",
    "xValue": 5,
    "time": "08:00:00",
    "stopId": "185",
    "passengers": 16
  }, {
    "yValue": "10110019",
    "xValue": 5,
    "time": "08:15:00",
    "stopId": "185",
    "passengers": 7
  }, {
    "yValue": "10111011",
    "xValue": 5,
    "time": "06:31:00",
    "stopId": "52",
    "passengers": 13
  }, {
    "yValue": "10111012",
    "xValue": 5,
    "time": "07:15:00",
    "stopId": "52",
    "passengers": 20
  }, {
    "yValue": "10111013",
    "xValue": 5,
    "time": "07:59:00",
    "stopId": "52",
    "passengers": 21
  }, {
    "yValue": "10111014",
    "xValue": 5,
    "time": "08:44:00",
    "stopId": "52",
    "passengers": 13
  }, {
    "yValue": "101000010",
    "xValue": 5,
    "time": "08:00:00",
    "stopId": "29",
    "passengers": 27
  }, {
    "yValue": "101000011",
    "xValue": 5,
    "time": "08:15:00",
    "stopId": "29",
    "passengers": 24
  }, {
    "yValue": "101000012",
    "xValue": 5,
    "time": "08:30:00",
    "stopId": "29",
    "passengers": 30
  }, {
    "yValue": "101000013",
    "xValue": 5,
    "time": "08:43:00",
    "stopId": "29",
    "passengers": 13
  }, {
    "yValue": "101000014",
    "xValue": 5,
    "time": "09:00:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "101000015",
    "xValue": 5,
    "time": "09:30:00",
    "stopId": "29",
    "passengers": 13
  }, {
    "yValue": "101000016",
    "xValue": 5,
    "time": "10:00:00",
    "stopId": "29",
    "passengers": 27
  }, {
    "yValue": "101000017",
    "xValue": 5,
    "time": "10:30:00",
    "stopId": "29",
    "passengers": 14
  }, {
    "yValue": "101000018",
    "xValue": 5,
    "time": "11:00:00",
    "stopId": "29",
    "passengers": 21
  }, {
    "yValue": "101000019",
    "xValue": 5,
    "time": "11:30:00",
    "stopId": "29",
    "passengers": 23
  }, {
    "yValue": "101000020",
    "xValue": 5,
    "time": "12:00:00",
    "stopId": "29",
    "passengers": 18
  }, {
    "yValue": "101000021",
    "xValue": 5,
    "time": "12:28:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "101000022",
    "xValue": 5,
    "time": "13:00:00",
    "stopId": "29",
    "passengers": 24
  }, {
    "yValue": "101000023",
    "xValue": 5,
    "time": "13:30:00",
    "stopId": "29",
    "passengers": 17
  }, {
    "yValue": "101000024",
    "xValue": 5,
    "time": "14:00:00",
    "stopId": "29",
    "passengers": 11
  }, {
    "yValue": "101000025",
    "xValue": 5,
    "time": "14:30:00",
    "stopId": "29",
    "passengers": 20
  }, {
    "yValue": "101000026",
    "xValue": 5,
    "time": "14:59:00",
    "stopId": "29",
    "passengers": 29
  }],
  "name": "Passengers"
}, {
  "stopId": "48",
  "data": [{
    "yValue": "10100001",
    "xValue": 5,
    "time": "05:50:00",
    "stopId": "48",
    "passengers": 16
  }, {
    "yValue": "10100002",
    "xValue": 5,
    "time": "06:03:00",
    "stopId": "48",
    "passengers": 25
  }, {
    "yValue": "10100003",
    "xValue": 5,
    "time": "06:18:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "10100004",
    "xValue": 5,
    "time": "06:33:00",
    "stopId": "48",
    "passengers": 26
  }, {
    "yValue": "10100005",
    "xValue": 5,
    "time": "06:48:00",
    "stopId": "48",
    "passengers": 16
  }, {
    "yValue": "10100006",
    "xValue": 5,
    "time": "07:03:00",
    "stopId": "48",
    "passengers": 22
  }, {
    "yValue": "10100007",
    "xValue": 5,
    "time": "07:18:00",
    "stopId": "48",
    "passengers": 10
  }, {
    "yValue": "10100008",
    "xValue": 5,
    "time": "07:33:00",
    "stopId": "48",
    "passengers": 6
  }, {
    "yValue": "10100009",
    "xValue": 5,
    "time": "07:48:00",
    "stopId": "48",
    "passengers": 26
  }, {
    "yValue": "10101001",
    "xValue": 5,
    "time": "06:10:00",
    "stopId": "48",
    "passengers": 27
  }, {
    "yValue": "10101002",
    "xValue": 5,
    "time": "06:54:00",
    "stopId": "48",
    "passengers": 14
  }, {
    "yValue": "10101003",
    "xValue": 5,
    "time": "07:38:00",
    "stopId": "48",
    "passengers": 17
  }, {
    "yValue": "10101004",
    "xValue": 5,
    "time": "08:22:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "10110011",
    "xValue": 5,
    "time": "06:16:00",
    "stopId": "149",
    "passengers": 2
  }, {
    "yValue": "10110012",
    "xValue": 5,
    "time": "06:31:00",
    "stopId": "149",
    "passengers": 20
  }, {
    "yValue": "10110013",
    "xValue": 5,
    "time": "06:46:00",
    "stopId": "149",
    "passengers": 20
  }, {
    "yValue": "10110014",
    "xValue": 5,
    "time": "07:02:00",
    "stopId": "149",
    "passengers": 21
  }, {
    "yValue": "10110015",
    "xValue": 5,
    "time": "07:16:00",
    "stopId": "149",
    "passengers": 16
  }, {
    "yValue": "10110016",
    "xValue": 5,
    "time": "07:31:00",
    "stopId": "149",
    "passengers": 23
  }, {
    "yValue": "10110017",
    "xValue": 5,
    "time": "07:46:00",
    "stopId": "149",
    "passengers": 21
  }, {
    "yValue": "10110018",
    "xValue": 5,
    "time": "08:01:00",
    "stopId": "149",
    "passengers": 29
  }, {
    "yValue": "10110019",
    "xValue": 5,
    "time": "08:16:00",
    "stopId": "149",
    "passengers": 26
  }, {
    "yValue": "10111011",
    "xValue": 5,
    "time": "06:32:00",
    "stopId": "5",
    "passengers": 10
  }, {
    "yValue": "10111012",
    "xValue": 5,
    "time": "07:16:00",
    "stopId": "5",
    "passengers": 16
  }, {
    "yValue": "10111013",
    "xValue": 5,
    "time": "08:00:00",
    "stopId": "5",
    "passengers": 23
  }, {
    "yValue": "10111014",
    "xValue": 5,
    "time": "08:45:00",
    "stopId": "5",
    "passengers": 15
  }, {
    "yValue": "101000010",
    "xValue": 5,
    "time": "08:03:00",
    "stopId": "48",
    "passengers": 28
  }, {
    "yValue": "101000011",
    "xValue": 5,
    "time": "08:18:00",
    "stopId": "48",
    "passengers": 26
  }, {
    "yValue": "101000012",
    "xValue": 5,
    "time": "08:33:00",
    "stopId": "48",
    "passengers": 26
  }, {
    "yValue": "101000013",
    "xValue": 5,
    "time": "08:46:00",
    "stopId": "48",
    "passengers": 27
  }, {
    "yValue": "101000014",
    "xValue": 5,
    "time": "09:03:00",
    "stopId": "48",
    "passengers": 13
  }, {
    "yValue": "101000015",
    "xValue": 5,
    "time": "09:33:00",
    "stopId": "48",
    "passengers": 21
  }, {
    "yValue": "101000016",
    "xValue": 5,
    "time": "10:03:00",
    "stopId": "48",
    "passengers": 18
  }, {
    "yValue": "101000017",
    "xValue": 5,
    "time": "10:33:00",
    "stopId": "48",
    "passengers": 18
  }, {
    "yValue": "101000018",
    "xValue": 5,
    "time": "11:03:00",
    "stopId": "48",
    "passengers": 28
  }, {
    "yValue": "101000019",
    "xValue": 5,
    "time": "11:33:00",
    "stopId": "48",
    "passengers": 29
  }, {
    "yValue": "101000020",
    "xValue": 5,
    "time": "12:03:00",
    "stopId": "48",
    "passengers": 21
  }, {
    "yValue": "101000021",
    "xValue": 5,
    "time": "12:31:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "101000022",
    "xValue": 5,
    "time": "13:03:00",
    "stopId": "48",
    "passengers": 19
  }, {
    "yValue": "101000023",
    "xValue": 5,
    "time": "13:33:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "101000024",
    "xValue": 5,
    "time": "14:03:00",
    "stopId": "48",
    "passengers": 4
  }, {
    "yValue": "101000025",
    "xValue": 5,
    "time": "14:33:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "101000026",
    "xValue": 5,
    "time": "15:02:00",
    "stopId": "48",
    "passengers": 21
  }],
  "name": "Passengers"
}, {
  "stopId": "30",
  "data": [{
    "yValue": "10100001",
    "xValue": 5,
    "time": "05:52:00",
    "stopId": "30",
    "passengers": 12
  }, {
    "yValue": "10100002",
    "xValue": 5,
    "time": "06:06:00",
    "stopId": "30",
    "passengers": 18
  }, {
    "yValue": "10100003",
    "xValue": 5,
    "time": "06:21:00",
    "stopId": "30",
    "passengers": 1
  }, {
    "yValue": "10100004",
    "xValue": 5,
    "time": "06:36:00",
    "stopId": "30",
    "passengers": 7
  }, {
    "yValue": "10100005",
    "xValue": 5,
    "time": "06:51:00",
    "stopId": "30",
    "passengers": 21
  }, {
    "yValue": "10100006",
    "xValue": 5,
    "time": "07:06:00",
    "stopId": "30",
    "passengers": 27
  }, {
    "yValue": "10100007",
    "xValue": 5,
    "time": "07:21:00",
    "stopId": "30",
    "passengers": 11
  }, {
    "yValue": "10100008",
    "xValue": 5,
    "time": "07:36:00",
    "stopId": "30",
    "passengers": 18
  }, {
    "yValue": "10100009",
    "xValue": 5,
    "time": "07:51:00",
    "stopId": "30",
    "passengers": 26
  }, {
    "yValue": "10101001",
    "xValue": 5,
    "time": "06:13:00",
    "stopId": "30",
    "passengers": 29
  }, {
    "yValue": "10101002",
    "xValue": 5,
    "time": "06:57:00",
    "stopId": "30",
    "passengers": 24
  }, {
    "yValue": "10101003",
    "xValue": 5,
    "time": "07:41:00",
    "stopId": "30",
    "passengers": 30
  }, {
    "yValue": "10101004",
    "xValue": 5,
    "time": "08:25:00",
    "stopId": "30",
    "passengers": 4
  }, {
    "yValue": "10110011",
    "xValue": 5,
    "time": "06:17:00",
    "stopId": "51",
    "passengers": 5
  }, {
    "yValue": "10110012",
    "xValue": 5,
    "time": "06:32:00",
    "stopId": "51",
    "passengers": 15
  }, {
    "yValue": "10110013",
    "xValue": 5,
    "time": "06:47:00",
    "stopId": "51",
    "passengers": 13
  }, {
    "yValue": "10110014",
    "xValue": 5,
    "time": "07:03:00",
    "stopId": "51",
    "passengers": 28
  }, {
    "yValue": "10110015",
    "xValue": 5,
    "time": "07:17:00",
    "stopId": "51",
    "passengers": 6
  }, {
    "yValue": "10110016",
    "xValue": 5,
    "time": "07:32:00",
    "stopId": "51",
    "passengers": 25
  }, {
    "yValue": "10110017",
    "xValue": 5,
    "time": "07:47:00",
    "stopId": "51",
    "passengers": 20
  }, {
    "yValue": "10110018",
    "xValue": 5,
    "time": "08:02:00",
    "stopId": "51",
    "passengers": 11
  }, {
    "yValue": "10110019",
    "xValue": 5,
    "time": "08:17:00",
    "stopId": "51",
    "passengers": 15
  }, {
    "yValue": "10111011",
    "xValue": 5,
    "time": "06:34:00",
    "stopId": "56",
    "passengers": 25
  }, {
    "yValue": "10111012",
    "xValue": 5,
    "time": "07:18:00",
    "stopId": "56",
    "passengers": 30
  }, {
    "yValue": "10111013",
    "xValue": 5,
    "time": "08:02:00",
    "stopId": "56",
    "passengers": 22
  }, {
    "yValue": "10111014",
    "xValue": 5,
    "time": "08:47:00",
    "stopId": "56",
    "passengers": 25
  }, {
    "yValue": "101000010",
    "xValue": 5,
    "time": "08:06:00",
    "stopId": "30",
    "passengers": 15
  }, {
    "yValue": "101000011",
    "xValue": 5,
    "time": "08:21:00",
    "stopId": "30",
    "passengers": 24
  }, {
    "yValue": "101000012",
    "xValue": 5,
    "time": "08:36:00",
    "stopId": "30",
    "passengers": 30
  }, {
    "yValue": "101000013",
    "xValue": 5,
    "time": "08:49:00",
    "stopId": "30",
    "passengers": 23
  }, {
    "yValue": "101000014",
    "xValue": 5,
    "time": "09:06:00",
    "stopId": "30",
    "passengers": 26
  }, {
    "yValue": "101000015",
    "xValue": 5,
    "time": "09:36:00",
    "stopId": "30",
    "passengers": 26
  }, {
    "yValue": "101000016",
    "xValue": 5,
    "time": "10:06:00",
    "stopId": "30",
    "passengers": 8
  }, {
    "yValue": "101000017",
    "xValue": 5,
    "time": "10:36:00",
    "stopId": "30",
    "passengers": 24
  }, {
    "yValue": "101000018",
    "xValue": 5,
    "time": "11:06:00",
    "stopId": "30",
    "passengers": 7
  }, {
    "yValue": "101000019",
    "xValue": 5,
    "time": "11:36:00",
    "stopId": "30",
    "passengers": 20
  }, {
    "yValue": "101000020",
    "xValue": 5,
    "time": "12:06:00",
    "stopId": "30",
    "passengers": 12
  }, {
    "yValue": "101000021",
    "xValue": 5,
    "time": "12:34:00",
    "stopId": "30",
    "passengers": 25
  }, {
    "yValue": "101000022",
    "xValue": 5,
    "time": "13:06:00",
    "stopId": "30",
    "passengers": 18
  }, {
    "yValue": "101000023",
    "xValue": 5,
    "time": "13:36:00",
    "stopId": "30",
    "passengers": 22
  }, {
    "yValue": "101000024",
    "xValue": 5,
    "time": "14:06:00",
    "stopId": "30",
    "passengers": 27
  }, {
    "yValue": "101000025",
    "xValue": 5,
    "time": "14:36:00",
    "stopId": "30",
    "passengers": 29
  }, {
    "yValue": "101000026",
    "xValue": 5,
    "time": "15:05:00",
    "stopId": "30",
    "passengers": 23
  }],
  "name": "Passengers"
}];

var margins = {
  top: 12,
  left: 100,
  right: 14,
  bottom: 34
};

var legendPanel = {
  width: 100
};

var numberOfRecords = 0;
var dataset = dataset.map(function(d) {
  numberOfRecords = 0;
  return d.data.map(function(o, i) {
    numberOfRecords++;
    return {
      y: o.xValue,
      x: o.yValue,
      name: d.name,
      stopId: o.stopId,
      passengers: o.passengers,
      time: o.time
    };
  });
});
d3.select(window).on("resize", throttle);
var stack = d3.layout.stack();
stack(dataset);
var dataset = dataset.map(function(group) {
  return group.map(function(d) {
    // Invert the x and y values, and y0 becomes x0
    return {
      x: d.y,
      y: d.x,
      x0: d.y0,
      name: d.name,
      stopId: d.stopId,
      passengers: d.passengers,
      time: d.time
    };
  });
});
var yValuesTripId = dataset[0].map(function(d) {
  return d.y;
});
var yValuesFirstStopTimes = dataset[0].map(function(d) {
  return d.time.slice(0, -3);
});
var yValuesLastStopTimes = dataset[dataset.length - 1].map(function(d) {
  return d.time.slice(0, -3);
});
var xMax = d3.max(dataset, function(group) {
  return d3.max(group, function(d) {
    return d.x + d.x0;
  });
});
var tooltip = d3.select("#chartDiv")
  .append('div')
  .attr('id', 'tooltip')
  .attr('class', 'hidden');

const chartArea = $("#chartDiv");
var width = chartArea.innerWidth() - margins.left - margins.right - legendPanel.width;
var barHeight = 10;
var height = (numberOfRecords * 40) - margins.top - margins.bottom;
var svg, xScale, yScaleLeft, yScaleRight, rects;

draw(width, height);

function draw(width, height) {

  svg = d3.select("#chartDiv")
    .append('svg')
    .attr('width', width + margins.left + margins.right)
    .attr('height', height + margins.top + margins.bottom)
    .append('g')
    .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

  xScale = d3.scale.linear()
    .domain([0, xMax])
    .range([0, width - margins.right]);

  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');

  yScaleLeft = d3.scale.ordinal()
    .domain(yValuesFirstStopTimes)
    .rangeRoundBands([0, height], .1);
  var yAxisLeft = d3.svg.axis()
    .scale(yScaleLeft)
    .orient('left');

  yScaleRight = d3.scale.ordinal()
    .domain(yValuesLastStopTimes)
    .rangeRoundBands([0, height], .1);

  var yAxisRight = d3.svg.axis()
    .scale(yScaleRight)
    .orient('right');

  var groups = svg.selectAll('g')
    .data(dataset)
    .enter()
    .append('g');

  rects = groups.selectAll('rect')
    .data(function(d) {
      return d;
    })
    .enter()
    .append('rect')
    .attr('x', function(d) {
      return xScale(d.x0);
    })
    .attr('y', function(d, i) {
      return yScaleLeft(d.y);
    })
    .attr('height', function(d) {
      return barHeight;
    })
    .attr('width', function(d) {
      return xScale(d.x);
    })
    .attr('fill', function(d) {
      return getColor(d.passengers);
    })
    .attr('stroke', 'white')
    .on('mouseover', function(d) {

      var xPos = d3.event.pageX - 310;
      var yPos = d3.event.pageY - 110;

      d3.select('#tooltip')
        .style("left", xPos + "px")
        .style("top", yPos + "px")
        .style('width', '250px')
        .text("Trip " + d.y + '|Passengers:' + d.passengers + '|Stop ' + d.stopId + '|time ' + d.time);

      d3.select('#tooltip').classed('hidden', false);
    })
    .on('mouseout', function() {
      d3.select('#tooltip').classed('hidden', true);
    });
  svg.append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);
  svg.append('g')
    .attr('class', 'axis')
    .call(yAxisLeft);
  /*         svg.append('g')
          .attr('class', 'axis')
          .attr("transform", "translate(" + width + ",200)")
          .call(yAxisRight); */
  const newWidth = width - 20;
  svg.append('g')
    .attr('class', 'axis')
    .attr("transform", "translate(" + newWidth + ",0)")
    .call(yAxisRight);
  var legend = d3.select("#chartDiv")
    .append('div')
    .attr('id', 'legend')
    .attr('class', 'row legend-row');
  legend.append('div')
    .attr('class', 'col-sm-4');
  const legendInfo = [{
    "color": "grey",
    "text": "Low occupancy less than 10 passengers"
  }, {
    "color": "yellow",
    "text": "Medium occupancy 10 to 20 passengers"
  }, {
    "color": "orange",
    "text": "High occupancy 20 to 25 passengers"
  }, {
    "color": "red",
    "text": "Crowded more than 25 passengers"
  }, ]
  $.each(legendInfo, function(idx, info) {
    let legendSection = legend.append('div')
      .attr('class', 'col-sm-4');
    legendSection.append('div')
      .attr('class', 'legend-element')
      .attr('style', 'background-color:' + info.color);
    legendSection.append('div')
      .attr('style', 'margin-left: 15px;')
      .text(info.text)
  });
}

function redraw() {
  width = chartArea.innerWidth() - margins.left - margins.right - legendPanel.width;
  d3.select('svg').remove();
  d3.select('#legend').remove();
  draw(width, height);
}
var throttleTimer;

function throttle() {
  window.clearTimeout(throttleTimer);
  throttleTimer = window.setTimeout(function() {
    redraw();
  }, 200);
}

function getColor(numberOfPassengers) {
  cellColor = "";
  if (numberOfPassengers < 10) {
    cellColor = "grey";
  } else if (numberOfPassengers < 20) {
    cellColor = "yellow";
  } else if (numberOfPassengers < 25) {
    cellColor = "orange";
  } else {
    cellColor = "red";
  }
  return cellColor;
}

【问题讨论】：

标签： javascript d3.js bar-chart stacked-chart stacked-area-chart

【解决方案1】：

您的第一个问题很简单：只需更改右边距即可。

然而，第二个问题要复杂得多：尽管 yValuesFirstStopTimes 和 yValuesLastStopTimes 都具有相同的长度（即 43），但左轴似乎与右轴未对齐，因为您有 在 yValuesFirstStopTimes 和 yValuesLastStopTimes 数组中重复值。在 D3 中，序数刻度将合并这些值（并且，由于两个数组中重复值的数量不同，您最终会在左右轴上得到不同的刻度数）。

一个（hacky）解决方案是根据yValuesFirstStopTimes...的长度定义您的域。

    yScaleLeft = d3.scale.ordinal()
    .domain(d3.range(0, yValuesFirstStopTimes.length))
    .rangeRoundBands([0, height], .1);

...然后，在轴生成器中，通过索引获取每个刻度的值：

var yAxisLeft = d3.svg.axis()
    .scale(yScaleLeft)
    .orient('left')
    .tickFormat(function(d, i) {
        return yValuesFirstStopTimes[i];
    });

对yValuesLastStopTimes 做同样的事情。

这是您的更新代码：

// source : https://gist.github.com/sidnan/20cf8ccf17f46534b101
d3.select("#chartDiv").select("svg").remove();
d3.select("#chartDiv").select("#legend").remove();

var dataset = [{
  "stopId": "29",
  "data": [{
    "yValue": "10100001",
    "xValue": 5,
    "time": "05:45:00",
    "stopId": "29",
    "passengers": 22
  }, {
    "yValue": "10100002",
    "xValue": 5,
    "time": "06:00:00",
    "stopId": "29",
    "passengers": 7
  }, {
    "yValue": "10100003",
    "xValue": 5,
    "time": "06:15:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "10100004",
    "xValue": 5,
    "time": "06:30:00",
    "stopId": "29",
    "passengers": 4
  }, {
    "yValue": "10100005",
    "xValue": 5,
    "time": "06:45:00",
    "stopId": "29",
    "passengers": 1
  }, {
    "yValue": "10100006",
    "xValue": 5,
    "time": "07:00:00",
    "stopId": "29",
    "passengers": 30
  }, {
    "yValue": "10100007",
    "xValue": 5,
    "time": "07:15:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "10100008",
    "xValue": 5,
    "time": "07:30:00",
    "stopId": "29",
    "passengers": 28
  }, {
    "yValue": "10100009",
    "xValue": 5,
    "time": "07:45:00",
    "stopId": "29",
    "passengers": 30
  }, {
    "yValue": "10101001",
    "xValue": 5,
    "time": "06:07:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "10101002",
    "xValue": 5,
    "time": "06:51:00",
    "stopId": "29",
    "passengers": 15
  }, {
    "yValue": "10101003",
    "xValue": 5,
    "time": "07:35:00",
    "stopId": "29",
    "passengers": 27
  }, {
    "yValue": "10101004",
    "xValue": 5,
    "time": "08:19:00",
    "stopId": "29",
    "passengers": 27
  }, {
    "yValue": "10110011",
    "xValue": 5,
    "time": "06:15:00",
    "stopId": "185",
    "passengers": 29
  }, {
    "yValue": "10110012",
    "xValue": 5,
    "time": "06:30:00",
    "stopId": "185",
    "passengers": 14
  }, {
    "yValue": "10110013",
    "xValue": 5,
    "time": "06:45:00",
    "stopId": "185",
    "passengers": 23
  }, {
    "yValue": "10110014",
    "xValue": 5,
    "time": "07:01:00",
    "stopId": "185",
    "passengers": 20
  }, {
    "yValue": "10110015",
    "xValue": 5,
    "time": "07:15:00",
    "stopId": "185",
    "passengers": 30
  }, {
    "yValue": "10110016",
    "xValue": 5,
    "time": "07:30:00",
    "stopId": "185",
    "passengers": 27
  }, {
    "yValue": "10110017",
    "xValue": 5,
    "time": "07:45:00",
    "stopId": "185",
    "passengers": 27
  }, {
    "yValue": "10110018",
    "xValue": 5,
    "time": "08:00:00",
    "stopId": "185",
    "passengers": 16
  }, {
    "yValue": "10110019",
    "xValue": 5,
    "time": "08:15:00",
    "stopId": "185",
    "passengers": 7
  }, {
    "yValue": "10111011",
    "xValue": 5,
    "time": "06:31:00",
    "stopId": "52",
    "passengers": 13
  }, {
    "yValue": "10111012",
    "xValue": 5,
    "time": "07:15:00",
    "stopId": "52",
    "passengers": 20
  }, {
    "yValue": "10111013",
    "xValue": 5,
    "time": "07:59:00",
    "stopId": "52",
    "passengers": 21
  }, {
    "yValue": "10111014",
    "xValue": 5,
    "time": "08:44:00",
    "stopId": "52",
    "passengers": 13
  }, {
    "yValue": "101000010",
    "xValue": 5,
    "time": "08:00:00",
    "stopId": "29",
    "passengers": 27
  }, {
    "yValue": "101000011",
    "xValue": 5,
    "time": "08:15:00",
    "stopId": "29",
    "passengers": 24
  }, {
    "yValue": "101000012",
    "xValue": 5,
    "time": "08:30:00",
    "stopId": "29",
    "passengers": 30
  }, {
    "yValue": "101000013",
    "xValue": 5,
    "time": "08:43:00",
    "stopId": "29",
    "passengers": 13
  }, {
    "yValue": "101000014",
    "xValue": 5,
    "time": "09:00:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "101000015",
    "xValue": 5,
    "time": "09:30:00",
    "stopId": "29",
    "passengers": 13
  }, {
    "yValue": "101000016",
    "xValue": 5,
    "time": "10:00:00",
    "stopId": "29",
    "passengers": 27
  }, {
    "yValue": "101000017",
    "xValue": 5,
    "time": "10:30:00",
    "stopId": "29",
    "passengers": 14
  }, {
    "yValue": "101000018",
    "xValue": 5,
    "time": "11:00:00",
    "stopId": "29",
    "passengers": 21
  }, {
    "yValue": "101000019",
    "xValue": 5,
    "time": "11:30:00",
    "stopId": "29",
    "passengers": 23
  }, {
    "yValue": "101000020",
    "xValue": 5,
    "time": "12:00:00",
    "stopId": "29",
    "passengers": 18
  }, {
    "yValue": "101000021",
    "xValue": 5,
    "time": "12:28:00",
    "stopId": "29",
    "passengers": 29
  }, {
    "yValue": "101000022",
    "xValue": 5,
    "time": "13:00:00",
    "stopId": "29",
    "passengers": 24
  }, {
    "yValue": "101000023",
    "xValue": 5,
    "time": "13:30:00",
    "stopId": "29",
    "passengers": 17
  }, {
    "yValue": "101000024",
    "xValue": 5,
    "time": "14:00:00",
    "stopId": "29",
    "passengers": 11
  }, {
    "yValue": "101000025",
    "xValue": 5,
    "time": "14:30:00",
    "stopId": "29",
    "passengers": 20
  }, {
    "yValue": "101000026",
    "xValue": 5,
    "time": "14:59:00",
    "stopId": "29",
    "passengers": 29
  }],
  "name": "Passengers"
}, {
  "stopId": "48",
  "data": [{
    "yValue": "10100001",
    "xValue": 5,
    "time": "05:50:00",
    "stopId": "48",
    "passengers": 16
  }, {
    "yValue": "10100002",
    "xValue": 5,
    "time": "06:03:00",
    "stopId": "48",
    "passengers": 25
  }, {
    "yValue": "10100003",
    "xValue": 5,
    "time": "06:18:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "10100004",
    "xValue": 5,
    "time": "06:33:00",
    "stopId": "48",
    "passengers": 26
  }, {
    "yValue": "10100005",
    "xValue": 5,
    "time": "06:48:00",
    "stopId": "48",
    "passengers": 16
  }, {
    "yValue": "10100006",
    "xValue": 5,
    "time": "07:03:00",
    "stopId": "48",
    "passengers": 22
  }, {
    "yValue": "10100007",
    "xValue": 5,
    "time": "07:18:00",
    "stopId": "48",
    "passengers": 10
  }, {
    "yValue": "10100008",
    "xValue": 5,
    "time": "07:33:00",
    "stopId": "48",
    "passengers": 6
  }, {
    "yValue": "10100009",
    "xValue": 5,
    "time": "07:48:00",
    "stopId": "48",
    "passengers": 26
  }, {
    "yValue": "10101001",
    "xValue": 5,
    "time": "06:10:00",
    "stopId": "48",
    "passengers": 27
  }, {
    "yValue": "10101002",
    "xValue": 5,
    "time": "06:54:00",
    "stopId": "48",
    "passengers": 14
  }, {
    "yValue": "10101003",
    "xValue": 5,
    "time": "07:38:00",
    "stopId": "48",
    "passengers": 17
  }, {
    "yValue": "10101004",
    "xValue": 5,
    "time": "08:22:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "10110011",
    "xValue": 5,
    "time": "06:16:00",
    "stopId": "149",
    "passengers": 2
  }, {
    "yValue": "10110012",
    "xValue": 5,
    "time": "06:31:00",
    "stopId": "149",
    "passengers": 20
  }, {
    "yValue": "10110013",
    "xValue": 5,
    "time": "06:46:00",
    "stopId": "149",
    "passengers": 20
  }, {
    "yValue": "10110014",
    "xValue": 5,
    "time": "07:02:00",
    "stopId": "149",
    "passengers": 21
  }, {
    "yValue": "10110015",
    "xValue": 5,
    "time": "07:16:00",
    "stopId": "149",
    "passengers": 16
  }, {
    "yValue": "10110016",
    "xValue": 5,
    "time": "07:31:00",
    "stopId": "149",
    "passengers": 23
  }, {
    "yValue": "10110017",
    "xValue": 5,
    "time": "07:46:00",
    "stopId": "149",
    "passengers": 21
  }, {
    "yValue": "10110018",
    "xValue": 5,
    "time": "08:01:00",
    "stopId": "149",
    "passengers": 29
  }, {
    "yValue": "10110019",
    "xValue": 5,
    "time": "08:16:00",
    "stopId": "149",
    "passengers": 26
  }, {
    "yValue": "10111011",
    "xValue": 5,
    "time": "06:32:00",
    "stopId": "5",
    "passengers": 10
  }, {
    "yValue": "10111012",
    "xValue": 5,
    "time": "07:16:00",
    "stopId": "5",
    "passengers": 16
  }, {
    "yValue": "10111013",
    "xValue": 5,
    "time": "08:00:00",
    "stopId": "5",
    "passengers": 23
  }, {
    "yValue": "10111014",
    "xValue": 5,
    "time": "08:45:00",
    "stopId": "5",
    "passengers": 15
  }, {
    "yValue": "101000010",
    "xValue": 5,
    "time": "08:03:00",
    "stopId": "48",
    "passengers": 28
  }, {
    "yValue": "101000011",
    "xValue": 5,
    "time": "08:18:00",
    "stopId": "48",
    "passengers": 26
  }, {
    "yValue": "101000012",
    "xValue": 5,
    "time": "08:33:00",
    "stopId": "48",
    "passengers": 26
  }, {
    "yValue": "101000013",
    "xValue": 5,
    "time": "08:46:00",
    "stopId": "48",
    "passengers": 27
  }, {
    "yValue": "101000014",
    "xValue": 5,
    "time": "09:03:00",
    "stopId": "48",
    "passengers": 13
  }, {
    "yValue": "101000015",
    "xValue": 5,
    "time": "09:33:00",
    "stopId": "48",
    "passengers": 21
  }, {
    "yValue": "101000016",
    "xValue": 5,
    "time": "10:03:00",
    "stopId": "48",
    "passengers": 18
  }, {
    "yValue": "101000017",
    "xValue": 5,
    "time": "10:33:00",
    "stopId": "48",
    "passengers": 18
  }, {
    "yValue": "101000018",
    "xValue": 5,
    "time": "11:03:00",
    "stopId": "48",
    "passengers": 28
  }, {
    "yValue": "101000019",
    "xValue": 5,
    "time": "11:33:00",
    "stopId": "48",
    "passengers": 29
  }, {
    "yValue": "101000020",
    "xValue": 5,
    "time": "12:03:00",
    "stopId": "48",
    "passengers": 21
  }, {
    "yValue": "101000021",
    "xValue": 5,
    "time": "12:31:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "101000022",
    "xValue": 5,
    "time": "13:03:00",
    "stopId": "48",
    "passengers": 19
  }, {
    "yValue": "101000023",
    "xValue": 5,
    "time": "13:33:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "101000024",
    "xValue": 5,
    "time": "14:03:00",
    "stopId": "48",
    "passengers": 4
  }, {
    "yValue": "101000025",
    "xValue": 5,
    "time": "14:33:00",
    "stopId": "48",
    "passengers": 30
  }, {
    "yValue": "101000026",
    "xValue": 5,
    "time": "15:02:00",
    "stopId": "48",
    "passengers": 21
  }],
  "name": "Passengers"
}, {
  "stopId": "30",
  "data": [{
    "yValue": "10100001",
    "xValue": 5,
    "time": "05:52:00",
    "stopId": "30",
    "passengers": 12
  }, {
    "yValue": "10100002",
    "xValue": 5,
    "time": "06:06:00",
    "stopId": "30",
    "passengers": 18
  }, {
    "yValue": "10100003",
    "xValue": 5,
    "time": "06:21:00",
    "stopId": "30",
    "passengers": 1
  }, {
    "yValue": "10100004",
    "xValue": 5,
    "time": "06:36:00",
    "stopId": "30",
    "passengers": 7
  }, {
    "yValue": "10100005",
    "xValue": 5,
    "time": "06:51:00",
    "stopId": "30",
    "passengers": 21
  }, {
    "yValue": "10100006",
    "xValue": 5,
    "time": "07:06:00",
    "stopId": "30",
    "passengers": 27
  }, {
    "yValue": "10100007",
    "xValue": 5,
    "time": "07:21:00",
    "stopId": "30",
    "passengers": 11
  }, {
    "yValue": "10100008",
    "xValue": 5,
    "time": "07:36:00",
    "stopId": "30",
    "passengers": 18
  }, {
    "yValue": "10100009",
    "xValue": 5,
    "time": "07:51:00",
    "stopId": "30",
    "passengers": 26
  }, {
    "yValue": "10101001",
    "xValue": 5,
    "time": "06:13:00",
    "stopId": "30",
    "passengers": 29
  }, {
    "yValue": "10101002",
    "xValue": 5,
    "time": "06:57:00",
    "stopId": "30",
    "passengers": 24
  }, {
    "yValue": "10101003",
    "xValue": 5,
    "time": "07:41:00",
    "stopId": "30",
    "passengers": 30
  }, {
    "yValue": "10101004",
    "xValue": 5,
    "time": "08:25:00",
    "stopId": "30",
    "passengers": 4
  }, {
    "yValue": "10110011",
    "xValue": 5,
    "time": "06:17:00",
    "stopId": "51",
    "passengers": 5
  }, {
    "yValue": "10110012",
    "xValue": 5,
    "time": "06:32:00",
    "stopId": "51",
    "passengers": 15
  }, {
    "yValue": "10110013",
    "xValue": 5,
    "time": "06:47:00",
    "stopId": "51",
    "passengers": 13
  }, {
    "yValue": "10110014",
    "xValue": 5,
    "time": "07:03:00",
    "stopId": "51",
    "passengers": 28
  }, {
    "yValue": "10110015",
    "xValue": 5,
    "time": "07:17:00",
    "stopId": "51",
    "passengers": 6
  }, {
    "yValue": "10110016",
    "xValue": 5,
    "time": "07:32:00",
    "stopId": "51",
    "passengers": 25
  }, {
    "yValue": "10110017",
    "xValue": 5,
    "time": "07:47:00",
    "stopId": "51",
    "passengers": 20
  }, {
    "yValue": "10110018",
    "xValue": 5,
    "time": "08:02:00",
    "stopId": "51",
    "passengers": 11
  }, {
    "yValue": "10110019",
    "xValue": 5,
    "time": "08:17:00",
    "stopId": "51",
    "passengers": 15
  }, {
    "yValue": "10111011",
    "xValue": 5,
    "time": "06:34:00",
    "stopId": "56",
    "passengers": 25
  }, {
    "yValue": "10111012",
    "xValue": 5,
    "time": "07:18:00",
    "stopId": "56",
    "passengers": 30
  }, {
    "yValue": "10111013",
    "xValue": 5,
    "time": "08:02:00",
    "stopId": "56",
    "passengers": 22
  }, {
    "yValue": "10111014",
    "xValue": 5,
    "time": "08:47:00",
    "stopId": "56",
    "passengers": 25
  }, {
    "yValue": "101000010",
    "xValue": 5,
    "time": "08:06:00",
    "stopId": "30",
    "passengers": 15
  }, {
    "yValue": "101000011",
    "xValue": 5,
    "time": "08:21:00",
    "stopId": "30",
    "passengers": 24
  }, {
    "yValue": "101000012",
    "xValue": 5,
    "time": "08:36:00",
    "stopId": "30",
    "passengers": 30
  }, {
    "yValue": "101000013",
    "xValue": 5,
    "time": "08:49:00",
    "stopId": "30",
    "passengers": 23
  }, {
    "yValue": "101000014",
    "xValue": 5,
    "time": "09:06:00",
    "stopId": "30",
    "passengers": 26
  }, {
    "yValue": "101000015",
    "xValue": 5,
    "time": "09:36:00",
    "stopId": "30",
    "passengers": 26
  }, {
    "yValue": "101000016",
    "xValue": 5,
    "time": "10:06:00",
    "stopId": "30",
    "passengers": 8
  }, {
    "yValue": "101000017",
    "xValue": 5,
    "time": "10:36:00",
    "stopId": "30",
    "passengers": 24
  }, {
    "yValue": "101000018",
    "xValue": 5,
    "time": "11:06:00",
    "stopId": "30",
    "passengers": 7
  }, {
    "yValue": "101000019",
    "xValue": 5,
    "time": "11:36:00",
    "stopId": "30",
    "passengers": 20
  }, {
    "yValue": "101000020",
    "xValue": 5,
    "time": "12:06:00",
    "stopId": "30",
    "passengers": 12
  }, {
    "yValue": "101000021",
    "xValue": 5,
    "time": "12:34:00",
    "stopId": "30",
    "passengers": 25
  }, {
    "yValue": "101000022",
    "xValue": 5,
    "time": "13:06:00",
    "stopId": "30",
    "passengers": 18
  }, {
    "yValue": "101000023",
    "xValue": 5,
    "time": "13:36:00",
    "stopId": "30",
    "passengers": 22
  }, {
    "yValue": "101000024",
    "xValue": 5,
    "time": "14:06:00",
    "stopId": "30",
    "passengers": 27
  }, {
    "yValue": "101000025",
    "xValue": 5,
    "time": "14:36:00",
    "stopId": "30",
    "passengers": 29
  }, {
    "yValue": "101000026",
    "xValue": 5,
    "time": "15:05:00",
    "stopId": "30",
    "passengers": 23
  }],
  "name": "Passengers"
}];

var margins = {
  top: 12,
  left: 100,
  right: 20,
  bottom: 34
};

var legendPanel = {
  width: 100
};

var numberOfRecords = 0;
var dataset = dataset.map(function(d) {
  numberOfRecords = 0;
  return d.data.map(function(o, i) {
    numberOfRecords++;
    return {
      y: o.xValue,
      x: o.yValue,
      name: d.name,
      stopId: o.stopId,
      passengers: o.passengers,
      time: o.time
    };
  });
});
d3.select(window).on("resize", throttle);
var stack = d3.layout.stack();
stack(dataset);
var dataset = dataset.map(function(group) {
  return group.map(function(d) {
    // Invert the x and y values, and y0 becomes x0
    return {
      x: d.y,
      y: d.x,
      x0: d.y0,
      name: d.name,
      stopId: d.stopId,
      passengers: d.passengers,
      time: d.time
    };
  });
});
var yValuesTripId = dataset[0].map(function(d) {
  return d.y;
});
var yValuesFirstStopTimes = dataset[0].map(function(d) {
  return d.time.slice(0, -3);
});
var yValuesLastStopTimes = dataset[dataset.length - 1].map(function(d) {
  return d.time.slice(0, -3);
});
var xMax = d3.max(dataset, function(group) {
  return d3.max(group, function(d) {
    return d.x + d.x0;
  });
});
var tooltip = d3.select("#chartDiv")
  .append('div')
  .attr('id', 'tooltip')
  .attr('class', 'hidden');

const chartArea = $("#chartDiv");
var width = chartArea.innerWidth() - margins.left - margins.right - legendPanel.width;
var barHeight = 10;
var height = (numberOfRecords * 40) - margins.top - margins.bottom;
var svg, xScale, yScaleLeft, yScaleRight, rects;

draw(width, height);

function draw(width, height) {

  svg = d3.select("#chartDiv")
    .append('svg')
    .attr('width', width + margins.left + margins.right)
    .attr('height', height + margins.top + margins.bottom)
    .append('g')
    .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

  xScale = d3.scale.linear()
    .domain([0, xMax])
    .range([0, width - margins.right]);

  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');

  yScaleLeft = d3.scale.ordinal()
    .domain(d3.range(0, yValuesFirstStopTimes.length))
    .rangeRoundBands([0, height], .1);

  var yAxisLeft = d3.svg.axis()
    .scale(yScaleLeft)
    .orient('left')
    .tickFormat(function(d,i){
    	return yValuesFirstStopTimes[i];
    });

  yScaleRight = d3.scale.ordinal()
    .domain(d3.range(0, yValuesLastStopTimes.length))
    .rangeRoundBands([0, height], .1);

  var yAxisRight = d3.svg.axis()
    .scale(yScaleRight)
    .orient('right')
    .tickFormat(function(d,i){
    	return yValuesLastStopTimes[i];
    });

  var groups = svg.selectAll('g')
    .data(dataset)
    .enter()
    .append('g');

  rects = groups.selectAll('rect')
    .data(function(d) {
      return d;
    })
    .enter()
    .append('rect')
    .attr('x', function(d) {
      return xScale(d.x0);
    })
    .attr('y', function(d, i) {
      return yScaleLeft(d.y);
    })
    .attr('height', function(d) {
      return barHeight;
    })
    .attr('width', function(d) {
      return xScale(d.x);
    })
    .attr('fill', function(d) {
      return getColor(d.passengers);
    })
    .attr('stroke', 'white')
    .on('mouseover', function(d) {

      var xPos = d3.event.pageX - 310;
      var yPos = d3.event.pageY - 110;

      d3.select('#tooltip')
        .style("left", xPos + "px")
        .style("top", yPos + "px")
        .style('width', '250px')
        .text("Trip " + d.y + '|Passengers:' + d.passengers + '|Stop ' + d.stopId + '|time ' + d.time);

      d3.select('#tooltip').classed('hidden', false);
    })
    .on('mouseout', function() {
      d3.select('#tooltip').classed('hidden', true);
    });
  svg.append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);
  svg.append('g')
    .attr('class', 'axis')
    .call(yAxisLeft);
  /*         svg.append('g')
          .attr('class', 'axis')
          .attr("transform", "translate(" + width + ",200)")
          .call(yAxisRight); */
  const newWidth = width - 20;
  svg.append('g')
    .attr('class', 'axis')
    .attr("transform", "translate(" + newWidth + ",0)")
    .call(yAxisRight);
  var legend = d3.select("#chartDiv")
    .append('div')
    .attr('id', 'legend')
    .attr('class', 'row legend-row');
  legend.append('div')
    .attr('class', 'col-sm-4');
  const legendInfo = [{
    "color": "grey",
    "text": "Low occupancy less than 10 passengers"
  }, {
    "color": "yellow",
    "text": "Medium occupancy 10 to 20 passengers"
  }, {
    "color": "orange",
    "text": "High occupancy 20 to 25 passengers"
  }, {
    "color": "red",
    "text": "Crowded more than 25 passengers"
  }, ]
  $.each(legendInfo, function(idx, info) {
    let legendSection = legend.append('div')
      .attr('class', 'col-sm-4');
    legendSection.append('div')
      .attr('class', 'legend-element')
      .attr('style', 'background-color:' + info.color);
    legendSection.append('div')
      .attr('style', 'margin-left: 15px;')
      .text(info.text)
  });
}

function redraw() {
  width = chartArea.innerWidth() - margins.left - margins.right - legendPanel.width;
  d3.select('svg').remove();
  d3.select('#legend').remove();
  draw(width, height);
}
var throttleTimer;

function throttle() {
  window.clearTimeout(throttleTimer);
  throttleTimer = window.setTimeout(function() {
    redraw();
  }, 200);
}

function getColor(numberOfPassengers) {
  cellColor = "";
  if (numberOfPassengers < 10) {
    cellColor = "grey";
  } else if (numberOfPassengers < 20) {
    cellColor = "yellow";
  } else if (numberOfPassengers < 25) {
    cellColor = "orange";
  } else {
    cellColor = "red";
  }
  return cellColor;
}

#chartDiv #xaxis .domain {
  fill: none;
  stroke: #000;
}

#chartDiv #xaxis text,
#yaxis text {
  font-size: 12px;
}

#chartDiv .axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
  display: none;
}

#chartDiv .axis text {
  font-family: sans-serif;
  font-size: 11px;
}

#chartDiv #tooltip {
  position: absolute;
  text-align: center;
  display: inline-block;
  font: 12px sans-serif;
  border: 0px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

#chartDiv #tooltip.hidden {
  display: none;
}

#chartDiv #tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 20px;
}

#chartDiv .legend-row {
  height: 50px;
}

#chartDiv .legend-element {
  width: 10px;
  height: 20px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chartDiv">
</div>

【讨论】：

PS：不要混用 jQuery 和 D3，没必要。让我头疼:-)
增加边距修复了第一个问题，谢谢！但是，应用为第二个问题建议的更改并没有解决它。此外，Notepadd ++ 搜索不会在每个数据子数组中返回任何重复的时间值。你能给我看一个吗？第二个问题的其他原因可能是什么？
有几个重复值。除此之外，您可以看到我的 sn-p 正在工作并且轴完全对齐。
这里是第一个停止时间，例如：["05:45", "06:00", "06:15", "06:30", "06:45", " 07:00”、“07:15”、“07:30”、“07:45”、“06:07”、“06:51”、“07:35”、“08:19”、“06”： 15”、“06:30”、“06:45”、“07:01”、“07:15”、“07:30”、“07:45”、“08:00”、“08:15” 、“06:31”、“07:15”、“07:59”、“08:44”、“08:00”、“08:15”、“08:30”、“08:43”、“ 09:00”、“09:30”、“10:00”、“10:30”、“11:00”、“11:30”、“12:00”、“12:28”、“13： 00”、“13:30”、“14:00”、“14:30”、“14:59”]
我可以看到发生了两次：“6:15”、“6:30”、“6:45”、“7:15”、“7:30”等......你有最后一个停止值中的几个重复值也是如此。正如我指出并修复的那样，第二个问题的原因是在序数范围内使用重复值。