我正在尝试使用带有d3.scaleTime()比例的d3.js绘制条形图。我尝试搜索，但没有得到更好的样本d3 v4。因此决定建造一个，但我认为domain我要指定的地方有些问题，因为monthScale这给了酒吧一些奇怪的绘图。任何帮助将不胜感激。我也试图在这一点上按月对x轴分组（根据数据大小，它可以是动态的；按周/天/年分组）。
var temperatures = [{
temp: 80,
onDate: '2016-01-01T16:00:49Z'
},
{
temp: 38,
onDate: '2016-02-01T16:00:49Z'
},
{
temp: 47,
onDate: '2016-05-01T16:00:49Z'
},
{
temp: 59,
onDate: '2017-01-01T16:00:49Z'
},
];
var months = temperatures.map(function(t) {
return new Date(t.onDate);
});
var maxDate = Math.max(...months);
var minDate = Math.min(...months);
var margin = {
top: 5,
right: 5,
bottom: 50,
left: 50
};
var fullWidth = 700;
var fullHeight = 200;
var width = fullWidth - margin.left - margin.right;
var height = fullHeight - margin.bottom - margin.top;
var svg = d3.select('.chart')
.append('svg')
.attr('width', fullWidth)
.attr('height', fullHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Vertical bars
var monthScale = d3.scaleTime()
.domain([minDate, maxDate])
.rangeRound([0, width]);
var tempScale = d3.scaleLinear()
.domain([0, d3.max(temperatures, function(d) {
return d.temp;
})])
.range([height, 0])
.nice();
var barHolder = svg.append('g')
.classed('bar-holder', true);
var bars = barHolder.selectAll('rect.bar')
.data(temperatures)
.enter()
.append('rect')
.classed('bar', true)
.attr('x', function(d, i) {
ndt = new Date(d.onDate)
return monthScale(ndt.getTime());
})
.attr('width', width / months.length)
.attr('y', function(d) {
return tempScale(d.temp);
})
.attr('height', function(d) {
return height - tempScale(d.temp);
});
// Vertical bars end
// scales
var xAxis = d3.axisBottom(monthScale)
.scale(monthScale)
.ticks(d3.timeWeeks(minDate, maxDate).length)
.tickSizeOuter(1);
var yAxis = d3.axisLeft(tempScale)
.tickSizeOuter(1);
svg.append('g')
.classed('x axis', true)
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
var yAxisElement = svg.append('g')
.classed('y axis', true)
.call(yAxis);
yAxisElement.append('text')
.attr('transform', 'rotate(-90) translate(-' + height / 2 + ', 0)')
.style('text-ancher', 'middle')
.attr('dy', '-2.5em')
.text('Farenheit');.chart {
background-color: white;
}
.chart rect {
stroke: white;
fill: steelblue;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: black;
}
.y.axis line {
stroke: black;
}
.axis text {
font-size: 12px;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="col-lg-12 chart">
</div>我只想在我的回答中加上序言，即您不应该正常使用d3.scaleTime条形图，但是如果您绝对必须出于一个或另一个原因，这就是我的处理方法。
d3为您的日期类型提供了一个内置的日期解析器 d3.utcParse("%Y-%m-%dT%H:%M:%SZ");
这大大简化了您的代码，我们在这样的forEach循环中使用此解析器
d.onDate = parseDate(d.onDate);
以下代码允许我们填充xAxis，以便我们可以看到更多的条形图并相应地调整矩形
var minDate = d3.min(temperatures, function(d) {
return d.onDate.getTime();
}),
maxDate = d3.max(temperatures, function(d) {
return d.onDate.getTime();
}),
padding = (maxDate - minDate) * .1;
这是您所做的所有更改的代码
var parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%SZ");
var temperatures = [{
temp: 80,
onDate: '2016-01-01T16:00:49Z'
},
{
temp: 38,
onDate: '2016-02-01T16:00:49Z'
},
{
temp: 47,
onDate: '2016-05-01T16:00:49Z'
},
{
temp: 59,
onDate: '2017-01-01T16:00:49Z'
},
];
temperatures.forEach(function(d) {
d.onDate = parseDate(d.onDate);
console.log(d.onDate)
return d;
})
var margin = {top: 25, right: 35, bottom: 25, left: 35, padd: 15};
var fullWidth = 600;
var fullHeight = 250;
var width = fullWidth - margin.left - margin.right;
var height = fullHeight - margin.bottom - margin.top;
var svg = d3.select('.chart').append('svg')
.attr('width', fullWidth)
.attr('height', fullHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var minDate = d3.min(temperatures, function(d) {
return d.onDate.getTime();
}),
maxDate = d3.max(temperatures, function(d) {
return d.onDate.getTime();
}),
padding = (maxDate - minDate) * .1;
var x = d3.scaleTime()
.rangeRound([0, width])
.domain([minDate - padding, maxDate + padding]);
var y = d3.scaleLinear()
.range([height, 0])
.domain([0, d3.max(temperatures, function(d) {
return d.temp;
})]);
var xAxis = d3.axisBottom(x)
.tickSizeOuter(0)
.tickFormat(d3.timeFormat("%b")),
yAxis = d3.axisLeft(y);
svg.append("g")
.attr("class","axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Farenheit");
var bars = svg.selectAll('.bar')
.data(temperatures)
.enter()
.append('rect')
.attr("class", "bar")
.attr('width', (width - margin.padd) / (temperatures.length * temperatures.length))
.attr('height', function(d) {
return height - y(d.temp);
})
.attr('x', function(d) {
return x(d.onDate) - margin.padd
})
.attr('y', function(d) {
return y(d.temp);
}).chart {
background-color: white;
}
.chart rect {
stroke: white;
fill: steelblue;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: black;
}
.y.axis line {
stroke: black;
}
.axis text {
font-size: 12px;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="col-lg-12 chart">
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句