javascript - 具有两个 Y 轴问题的水平堆叠条形图-6ren

javascript - 具有两个 Y 轴问题的水平堆叠条形图

转载作者：太空宇宙更新时间：2023-11-04 15:50:11

我对我的图表有以下问题:

如何防止右侧 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;
}

最佳答案

您的第一个问题非常简单:只需更改右边距即可。

然而，第二个问题要复杂得多:尽管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>

关于javascript - 具有两个 Y 轴问题的水平堆叠条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43196819/

文章推荐： javascript - 更新 y 轴标题

文章推荐： c++ - 嵌套 if vs 循环条件

Android - 条形图、条形图
我想在我的 android 应用程序中实现一个反馈/评级图表。(就像当你打开 google play 并检查应用程序的反馈时，有一个来自投票它的用户的彩色图表)任何人都可以帮助我如何开始那个？感谢您提
LaTeX 条形图
我正在尝试使用 LaTeX 制作条形图。到目前为止我一直不成功，所以任何人都可以帮助我，也许是最近项目的副本？如何使用 pstricks 制作条形图？我会很感激最简单的解决方案，因为我最近才开始使用
r - 将时间线上的时间跨度可视化为水平直方图/条形图
我有一个包含 6 个事件及其发生时间跨度的 csv 表。我的变量是开始日期、结束日期和事件 ID。我打算创建一个水平直方图/条形图可视化来显示时间范围，即某些类型的事件持续了多长时间。 X 轴应该有多
r - float 条形图
我想制作可以指定条形最小值的条形图(很像盒须图中的盒子)。条形图可以做到吗？我怀疑答案在 ggplot 中，但我找不到示例。这是一些数据: X Jan F
r - 条形图 - 两个相邻的条形图和单独窗口中的条形图
我想使用以下数据来创建可视化: > dput(data) structure(c(1264L, 2190L, 2601L, 1441L, 1129L, 2552L, 1820L, 306L,
python - 条形图，带有单独的正值和负值条形图
我有一个包含正值和负值的数据框。我想显示一个显示两个条形的条形图，一个条形显示正值的百分比，另一个条形图显示负值的百分比。 dummy = pd.DataFrame({'A' : [-4, -3, -
javascript - 如何在条形图中添加自定义文本以及如何减小图表js中y轴的步长(条形图)
我正在尝试在栏中插入自定义文本，我搜索了很多线程，但仍然没有得到任何解决方案。然后我想减小 y 轴的步长。我已附上我的代码。 jQuery( document ).ready(function() {
使用子图的 Pandas 条形图
我正在使用 pandas 来创建条形图。这是一个例子: df=pd.DataFrame(np.random.rand(10, 4), columns=['a', 'b', 'c', 'd']) df.
表示范围的 Python 条形图
我想在python中制作一个分类图来表示几个变量的范围。我想也许我会使用条形图并为条形设置范围。这是我的条形图 import matplotlib.pyplot as plt import numpy
javascript - 条形图 - 条形填充和对齐
我有一个显示 3 个条形的堆叠百分比条形图。 JSFiddle:https://jsfiddle.net/Lr0bszj6/ 由于某种原因，条形之间有很多空间并且没有与标签对齐(只有中间一个)。设置
Android aChartEngine 条形图
我正在尝试使用 aChartEngine 将 GPS 数据(正在查看或正在使用的卫星)显示为条形图，但我没有在此 View 中显示任何数据。这是我的代码，所以你能告诉我我犯了什么错误吗？ public
javascript - 条形图将数据堆叠在彼此之上
我正在使用 this chart implementation . 但是，它分散了我的数据，而不是相互堆叠。我想在 1970 年堆叠我的第一个数组，在 1975 年堆叠第二个数组。换句话说，我希望有
Matlab 条形图 - 根据符号和大小填充不同颜色的条形图
我正在尝试用不同颜色为条形图中的各个条形着色，比如蓝色表示正，红色表示负。我在互联网上找不到任何有用的东西。我在下面的代码中发现每个条形图都根据第一个条形图的值着色，而不是为每个条形图单独设置颜色:
python - Pandas 条形图
我刚刚转移到 pandas 0.20/matplotlib 2.0 python 3.6。 (共构成以下版本)。我用 pandas 来绘制条形图，因为 matplotlib 的级别总是太低。着色列的行
python - float 条形图
我正在尝试制作一个图，其中 x 轴是时间，y 轴是一个条形图，其中的条形图覆盖特定时间段，如下所示: ______________
CSS 条形图 - 非常简单
我有一些非常基本的代码，它可以正常工作，除了所有内容都与顶部对齐...理想情况下，条形图应与底部对齐。我想我可以使用固定定位，因为尺寸是 50px x 50px 的平方，但我更喜欢“固定”少一点的东西
VBA 在图表(条形图)上写入值
这是我用来 Dim ejex As String, ejey As String Dim graficos As String Worksheets("Sheet1").Activate ejex =
来自数据文件的 Gnuplot 3D 条形图
我有一个生成如下条形图的 gnuplot 脚本: 输入数据位于具有多列的文件中，每一列最终都构成图表中的一个集群(示例中显示了 2 个集群)。每个文件都构成图表中的一个条形(示例中有 9 个)。每个文
r - 如何使用一个变量连续填充 ggplot2 条形图
我正在为我的数据 movies 使用库 ggplot2movies 请记住，我指的是 mpaa 评级和用户评级，这是两个不同的事物。如果您不想加载 ggplot2movies 库，这里是相关数据的示例
matplotlib - Pandas 条形图-按列指定条形颜色
有没有一种简单的方法可以使用Pandas DataFrame.plot(kind='bar')方法按列名指定条形颜色？我有一个脚本，可以从目录中的几个不同数据文件生成多个DataFrame。例如，它

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 具有两个 Y 轴问题的水平堆叠条形图