我希望将这段代码从D3.js的V3版本转换为V4版本:
var monthArray = d3.time.scale()
.domain(d3.extent(metricMonths))
.ticks(d3.time.months, 1);
我希望将这段代码从D3.js的V3版本转换为V4版本:
var monthArray = d3.time.scale()
.domain(d3.extent(metricMonths))
.ticks(d3.time.months, 1);
以下代码适用于D3 V4:
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const xScale = d3.scaleTime()
.domain([new Date(2020, 0, 1), new Date(2020, 11, 1)])
.range([0, 500]);
const xAxis = d3.axisBottom()
.scale(xScale)
.ticks(12)
.tickFormat(d => months[d.getMonth()])
const svg = d3.select("svg")
svg.append("g")
.attr("transform", "translate(20,30)")
.call(xAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg width="600" height="100" />
更新:这段代码同样可以正常工作:
const xScale = d3.scaleLinear()
.domain([0, 11])
.range([0, 500]);
const xAxis = d3.axisBottom()
.scale(xScale)
.ticks(12)
.tickFormat(d => months[d])