具有两个Y轴问题的水平堆积条形图 [英] Horizontal Stacked Bar Chart with Two Y Axis Issues
本文介绍了具有两个Y轴问题的水平堆积条形图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
关于图表，我有以下问题/疑问:
I have the following issues/questions regarding my charts:
-
如何防止右侧y轴刻度值被部分删除或进入图表内部?
How can I prevent the right y axis tick values from either being partially deleted or getting inside the chart?
当我将yValuesTripId用作左y轴域和右y轴域的域时，图表会很好地绘制.
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:
这是代码:
// 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;
}
推荐答案
第一个问题很简单:只需更改右边距即可.
Your first question is very simple: just change the right margin.
但是，第二个问题要复杂得多:尽管yValuesFirstStopTimes和yValuesLastStopTimes都具有相同的长度(即43)，但是左轴似乎未与右轴对齐，因为您具有在yValuesFirstStopTimes和yValuesLastStopTimes数组中重复值.在D3中，序数刻度将合并这些值(并且，由于两个数组中重复值的数量不同，因此最终在左右轴上的刻度数将不同).
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).
(hacky)解决方案正在根据yValuesFirstStopTimes ...
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];
});
并对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>
这篇关于具有两个Y轴问题的水平堆积条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
