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

关于我的图表，我有以下问题/疑问：如何防止右侧y轴刻度值被部分删除或进入图表内部？当我将yValuesTripId用作左y轴域和右y轴域两者的域时，图表会很好地绘制。如何使用yAxisFirstStopTimes作为y轴的左域值和yAxisLastStopTimes作为y轴的右值进行精细绘制？您可以通过单击here查看或编辑图表：这是代码：// source : https://gist.github.com/sidnan/20cf8ccf17f46534b101d3.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数组。在D3中，序数刻度将合并这些值（并且，由于两个数组中重复值的数量不同，因此最终在左右轴上的刻度数将不同）。一个（棘手的）解决方案正在根据yValuesLastStopTimes的长度定义您的域... 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]; });对yValuesFirstStopTimes做同样的事情。这是您更新的代码：// source : https://gist.github.com/sidnan/20cf8ccf17f46534b101d3.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>