我只是尝试在d3中编写可重复使用的图表来可视化我们的能源数据。 我使用TimeScale作为X轴。我不能使用OrdinalScale(没有离散域),因此我必须计算" RangeBand"等等。
问题:我的酒吧与图表重叠 - 防止这种情况的最佳方法是什么? 我认为一种方法是在X轴域中设置一个偏移量 - 这是我的代码片段(希望很清楚......):
// get X-Axis Min from all channels
var tsMin = d3.min(channels, function (channel) {
return d3.min(channel.DataRows, function (d) { return d.TimeStamp; });
});
// get X-Axis Max from all channels
var tsMax = d3.max(channels, function (channel) {
return d3.max(channel.DataRows, function (d) { return d.TimeStamp; });
});
// Test: offset 1 day
var tsMinOff = d3.time.day.offset(tsMin, -1)
var tsMaxOff = d3.time.day.offset(tsMax, 1)
xScale.domain([tsMinOff, tsMaxOff]);
var bars = chGroup.selectAll(".bar").data(channel.DataRows);
var barWidth = chartWidth / channel.DataRows.length;
bars.enter().append("rect")
.classed("bar", true)
.attr("x", function (d) { return xScale(d.TimeStamp) - (barWidth / 2); })
.attr("width", barWidth)
.attr("y", function (d) { return yScale(d.Value) })
.attr("height", function (d) { return chartHeight - yScale(d.Value); })
.style("fill", channel.Color);
... THX !!