D3js：将v3升级到v5

Question

我开始用D3 javascript进行编码，我真的不了解。我在Internet上找到了一个很好的示例，其中的条形图通过下拉菜单进行更新，并开始研究并进行一两个修改。此示例在D3的版本3中进行，我想使其在版本5中工作。有人可以给我一些有关如何使它在版本5中工作的提示吗？

我将在下面的代码中查看可以进行哪些更改。

最诚挚的问候！

func mapView(_ mapView: MKMapView,
             viewFor annotation: MKAnnotation) -> MKAnnotationView? {

    let identifier = "marker"

    if annotation is MKUserLocation { return nil }

    guard let annotation = annotation as? AlertAnotation else {
        return nil
    }

    var anView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)
    if anView == nil {
        anView = MKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
    }
    else {
        //  we are re-using a view, update its annotation reference...
        anView?.annotation = annotation
    }

    anView?.image = HazardType(rawValue: annotation.alertModel.type ?? -1)?.markerImage()
    return anView
}

func mapView(_ mapView: MKMapView, didAdd views: [MKAnnotationView]) {
    mapView.view(for: mapView.userLocation)?.isEnabled = false

    for annotationView in views {
        if let annotationModel = annotationView.annotation as? AlertAnotation {
            annotationView.layer.zPosition = annotationModel.alertModel.isTemp! ? 1 : 0
            annotationView.isDraggable = annotationModel.alertModel.isTemp!
            annotationView.isEnabled = annotationModel.alertModel.isTemp!
        }else{
            annotationView.isEnabled = false
        }
    }
}

func mapView(_ mapView: MKMapView,
             annotationView view: MKAnnotationView,
             didChange newState: MKAnnotationView.DragState,
             fromOldState oldState: MKAnnotationView.DragState) {

    //  restat timer
    if newState == .starting {
        self.circularView.pause()
    }
    if newState == .ending {
        self.circularView.restart()
    }
}

Answer 1

v3和v5之间有很多更改。例如，d3.scale.linear现在只是d3.scaleLinear。您可以查看D3的发行说明，但老实说，最好仅使用以v5创建的另一个条形图作为模板。

d3.scale.linear现在是d3.scaleLinear d3.scale.ordingal现在是d3.scaleOrdinal

轴现在使用y3轴d3.axisLeft和x轴d3.axisBottom构建。