D3 v3到v5需要了解的变化(一)

时间: 2020-05-07 16:00:03

1.attr

selection.attr({
    width:'100%',
    height:'30px'
})
->
selection.attr('width','100%')
        .attr('height','30px');

2.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

3.d3.scale.category

d3.scale.category10    ->     d3.schemeCategory10
d3.scale.category20    ->     d3.schemeCategory20
d3.scale.category20b   ->    d3.schemeCategory20b
d3.scale.category20c   ->    d3.schemeCategory20c

4.d3.svg.axis

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

5.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

6.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