Horizontal Stacked Bar Chart with Two Y Axis Issues

删除回忆录丶 提交于 2019-12-24 09:15:04

问题


I have the following issues/questions regarding my charts:

  • How can I prevent the right y axis tick values from either being partially deleted or getting inside the chart?

  • When I use the yValuesTripId as domain for both left and right y axis domain the chart draw fine. How can I get it to draw fine with yAxisFirstStopTimes as left y axis domain values and yAxisLastStopTimes as right y axis values?

You can view or edit the chart by clicking here:

Here is the code:

// 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;
}

回答1:


Your first question is very simple: just change the right margin.

The second question, however, is way more complicated: despite yValuesFirstStopTimes and yValuesLastStopTimes both having the same length (which is 43), the left axis appears to be misaligned to the right one because you have repeating values in both your yValuesFirstStopTimes and yValuesLastStopTimes arrays. In D3, the ordinal scale will merge those values (and, because the number of repeating values is different in the two arrays, you'll end up with different number of ticks in the left and right axes).

A (hacky) solution is defining your domain according to the length of yValuesFirstStopTimes...

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

... and then, in the axis generator, getting the value of each tick by its index:

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

And doing the same for yValuesLastStopTimes.

Here is your updated code:

// 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>


来源:https://stackoverflow.com/questions/43196819/horizontal-stacked-bar-chart-with-two-y-axis-issues

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!