我对我的图表有以下问题:
如何防止右侧 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/