D3 v3到v5需要了解的变化

v3 → v5 改动

js url

<script src="https://d3js.org/d3.v3.js"></script>

<script src="https://d3js.org/d3.v5.js"></script>

style

selection.style({
    width:'100%',
    height:'30px'
})
//修改如下
selection.style('width','100%')
        .style('height','30px');

attr

selection.attr({
    width:'100%',
    height:'30px'
})
//修改如下
selection.attr('width','100%')
        .attr('height','30px');

selectAll

v3:
 d3.selectAll(selector) → Array

v5:
 d3.selectAll(selector) → Object

  d3.selectAll(selector).nodes() 获取 Array

d3.scale.linear

d3.scale.linear ↦ d3.scaleLinear
d3.scale.sqrt ↦ d3.scaleSqrt
d3.scale.pow ↦ d3.scalePow
d3.scale.log ↦ d3.scaleLog
d3.scale.quantize ↦ d3.scaleQuantize
d3.scale.threshold ↦ d3.scaleThreshold
d3.scale.quantile ↦ d3.scaleQuantile
d3.scale.identity ↦ d3.scaleIdentity
d3.scale.ordinal ↦ d3.scaleOrdinal
d3.time.scale ↦ d3.scaleTime
d3.time.scale.utc ↦ d3.scaleUtc

d3.scale.category

d3.scale.category10 ↦ d3.schemeCategory10
d3.scale.category20 ↦ d3.schemeCategory20
d3.scale.category20b ↦ d3.schemeCategory20b
d3.scale.category20c ↦ d3.schemeCategory20c

d3.svg.axis

d3.select(".axis")
    .call(d3.svg.axis()
        .scale(x)
        .orient("bottom"));

→
d3.select(".axis")
    .call(d3.axisBottom(x));

    

d3.svg.line

d3.svg.line ↦ d3.line
d3.svg.line.radial ↦ d3.radialLine
d3.svg.area ↦ d3.area
d3.svg.area.radial ↦ d3.radialArea
d3.svg.arc ↦ d3.arc
d3.svg.symbol ↦ d3.symbol
d3.svg.symbolTypes ↦ d3.symbolTypes
d3.layout.pie ↦ d3.pie
d3.layout.stack ↦ d3.stack
d3.svg.diagonal ↦ REMOVED (see d3/d3-shape#27)
d3.svg.diagonal.radial ↦ REMOVED

d3.time

d3.time.format ↦ d3.timeFormat
d3.time.format.utc ↦ d3.utcFormat
d3.time.format.iso ↦ d3.isoFormat
ADDED ↦ d3.timeMillisecond
d3.time.second ↦ d3.timeSecond
d3.time.minute ↦ d3.timeMinute
d3.time.hour ↦ d3.timeHour
d3.time.day ↦ d3.timeDay
d3.time.sunday ↦ d3.timeSunday
d3.time.monday ↦ d3.timeMonday
d3.time.tuesday ↦ d3.timeTuesday
d3.time.wednesday ↦ d3.timeWednesday
d3.time.thursday ↦ d3.timeThursday
d3.time.friday ↦ d3.timeFriday
d3.time.saturday ↦ d3.timeSaturday
d3.time.week ↦ d3.timeWeek
d3.time.month ↦ d3.timeMonth
d3.time.year ↦ d3.timeYear
The UTC time intervals have likewise been renamed:

ADDED ↦ d3.utcMillisecond
d3.time.second.utc ↦ d3.utcSecond
d3.time.minute.utc ↦ d3.utcMinute
d3.time.hour.utc ↦ d3.utcHour
d3.time.day.utc ↦ d3.utcDay
d3.time.sunday.utc ↦ d3.utcSunday
d3.time.monday.utc ↦ d3.utcMonday
d3.time.tuesday.utc ↦ d3.utcTuesday
d3.time.wednesday.utc ↦ d3.utcWednesday
d3.time.thursday.utc ↦ d3.utcThursday
d3.time.friday.utc ↦ d3.utcFriday
d3.time.saturday.utc ↦ d3.utcSaturday
d3.time.week.utc ↦ d3.utcWeek
d3.time.month.utc ↦ d3.utcMonth
d3.time.year.utc ↦ d3.utcYear

The local time range aliases have been renamed:

d3.time.seconds ↦ d3.timeSeconds
d3.time.minutes ↦ d3.timeMinutes
d3.time.hours ↦ d3.timeHours
d3.time.days ↦ d3.timeDays
d3.time.sundays ↦ d3.timeSundays
d3.time.mondays ↦ d3.timeMondays
d3.time.tuesdays ↦ d3.timeTuesdays
d3.time.wednesdays ↦ d3.timeWednesdays
d3.time.thursdays ↦ d3.timeThursdays
d3.time.fridays ↦ d3.timeFridays
d3.time.saturdays ↦ d3.timeSaturdays
d3.time.weeks ↦ d3.timeWeeks
d3.time.months ↦ d3.timeMonths
d3.time.years ↦ d3.timeYears

The UTC time range aliases have been renamed:

d3.time.seconds.utc ↦ d3.utcSeconds
d3.time.minutes.utc ↦ d3.utcMinutes
d3.time.hours.utc ↦ d3.utcHours
d3.time.days.utc ↦ d3.utcDays
d3.time.sundays.utc ↦ d3.utcSundays
d3.time.mondays.utc ↦ d3.utcMondays
d3.time.tuesdays.utc ↦ d3.utcTuesdays
d3.time.wednesdays.utc ↦ d3.utcWednesdays
d3.time.thursdays.utc ↦ d3.utcThursdays
d3.time.fridays.utc ↦ d3.utcFridays
d3.time.saturdays.utc ↦ d3.utcSaturdays
d3.time.weeks.utc ↦ d3.utcWeeks
d3.time.months.utc ↦ d3.utcMonths
d3.time.years.utc ↦ d3.utcYears

d3.time.dayOfYear ↦ d3.timeDay.count
d3.time.sundayOfYear ↦ d3.timeSunday.count
d3.time.mondayOfYear ↦ d3.timeMonday.count
d3.time.tuesdayOfYear ↦ d3.timeTuesday.count
d3.time.wednesdayOfYear ↦ d3.timeWednesday.count
d3.time.thursdayOfYear ↦ d3.timeThursday.count
d3.time.fridayOfYear ↦ d3.timeFriday.count
d3.time.saturdayOfYear ↦ d3.timeSaturday.count
d3.time.weekOfYear ↦ d3.timeWeek.count
d3.time.dayOfYear.utc ↦ d3.utcDay.count
d3.time.sundayOfYear.utc ↦ d3.utcSunday.count
d3.time.mondayOfYear.utc ↦ d3.utcMonday.count
d3.time.tuesdayOfYear.utc ↦ d3.utcTuesday.count
d3.time.wednesdayOfYear.utc ↦ d3.utcWednesday.count
d3.time.thursdayOfYear.utc ↦ d3.utcThursday.count
d3.time.fridayOfYear.utc ↦ d3.utcFriday.count
d3.time.saturdayOfYear.utc ↦ d3.utcSaturday.count
d3.time.weekOfYear.utc ↦ d3.utcWeek.count

other

linear ↦ d3.curveLinear
linear-closed ↦ d3.curveLinearClosed
step ↦ d3.curveStep
step-before ↦ d3.curveStepBefore
step-after ↦ d3.curveStepAfter
basis ↦ d3.curveBasis
basis-open ↦ d3.curveBasisOpen
basis-closed ↦ d3.curveBasisClosed
bundle ↦ d3.curveBundle
cardinal ↦ d3.curveCardinal
cardinal-open ↦ d3.curveCardinalOpen
cardinal-closed ↦ d3.curveCardinalClosed
monotone ↦ d3.curveMonotoneX
circle ↦ d3.symbolCircle
cross ↦ d3.symbolCross
diamond ↦ d3.symbolDiamond
square ↦ d3.symbolSquare
triangle-down ↦ REMOVED
triangle-up ↦ d3.symbolTriangle
ADDED ↦ d3.symbolStar
ADDED ↦ d3.symbolWye

参考文献

• d3 changes

本文作者：前端首席体验师(CheongHu)

联系邮箱：simple2012hcz@126.com