将 d3JS 从 v3 转换为 v4？

Question

我想将此代码从 v3 转换为 v4 (d3.JS)，我是初学者，但我尝试过但不起作用:(

var dataXrange = d3.extent(dataset, function(d) { return d.month; });
var dataYrange = [0, d3.max(dataset, function(d) { return d.count; })];

// maximum date range allowed to display
var mindate = dataXrange[0],  // use the range of the data
    maxdate = dataXrange[1];

var DateFormat    =  d3.time.format("%d %b %Y");

var dynamicDateFormat = timeFormat([
    [d3.time.format("%Y"), function() { return true; }],// <-- how to display when Jan 1 YYYY
    [d3.time.format("%b %Y"), function(d) { return (d.getMonth()); }],
    [d3.time.format("%d %b %Y"), function(d) { return (d.getDay()); }],
    [function(){return "";}, function(d) { return (d.getDate()) != 1; }]
]);

/* === Focus Chart === */

var x = d3.time.scale()
    .range([0, (width)])
    .domain(dataXrange);

var y = d3.scale.linear()
    .range([height, 0])
    .domain(dataYrange);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(-(height))
    .ticks(customTickFunction)
    .tickFormat(dynamicDateFormat);

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(4)
    .tickSize(-(width))
    .orient("right");

/* === Context Chart === */

var x2 = d3.time.scale()
    .range([0, width])
    .domain([mindate, maxdate]);

var y2 = d3.scale.linear()
    .range([height_context, 0])
    .domain(y.domain());

var xAxis_context = d3.svg.axis()
    .scale(x2)
    .orient("bottom")
    .ticks(customTickFunction)
    .tickFormat(dynamicDateFormat);

我尝试过，但没有成功：

// the date range of available data:
var dataXrange = d3.extent(dataset, function(d) { return d.month; });
var dataYrange = [0, d3.max(dataset, function(d) { return d.count; })];

// maximum date range allowed to display
var mindate = dataXrange[0],  // use the range of the data
    maxdate = dataXrange[1];

var DateFormat    =  d3.timeFormat("%d %b %Y");

var dynamicDateFormat = timeFormat([
    [d3.timeFormat("%Y"), function() { return true; }],// <-- how to display when Jan 1 YYYY
    [d3.timeFormat("%b %Y"), function(d) { return (d.getMonth()); }],
    [d3.timeFormat("%d %b %Y"), function(d) { return (d.getDay()); }],
    [function(){return "";}, function(d) { return (d.getDate()) != 1; }]
]);

/* === Focus Chart === */

var x = d3.scaleTime()
    .range([0, width])
    .domain(dataXrange);

var y = d3.scaleLinear()
    .range([height, 0])
    .domain(dataYrange);

var xAxis = d3.axisBottom(x)
    .scale(x)
    .tickSize(-(height))
    .ticks(customTickFunction)
    .tickFormat(dynamicDateFormat);

var yAxis = d3.axisRight(y)
    .scale(y)
    .ticks(4)
    .tickSize(-(width));


/* === Context Chart === */

var x2 = d3.scaleTime()
    .range([0, width])
    .domain([mindate, maxdate]);

var y2 = d3.scaleLinear()
    .range([height_context, 0])
    .domain(y.domain());

var xAxis_context = d3.axisBottom(x2)
    .scale(x2)
    .ticks(customTickFunction)
    .tickFormat(dynamicDateFormat);

使用的两个函数是：

function customTickFunction(t0, t1, dt)  {
    console.log('custom')
    var labelSize = 42; //
    var maxTotalLabels = Math.floor(width / labelSize);
    function step(date, offset)
    {
        date.setMonth((date.getMonth()) + offset);
    }

    var time = d3.time.month.ceil(t0), times = [], monthFactors = [1,3,4,12];

    while (time < t1) times.push(new Date(+time)), step(time, 1);
    var timesCopy = times;
    var i;
    for(i=0 ; times.length > maxTotalLabels ; i++)
        times = _.filter(timesCopy, function(d){
            return (d.getMonth()) % monthFactors[i] == 0;
        });

    return times;
};

var dynamicDateFormat = timeFormat([
    [d3.timeFormat("%Y"), function() { return true; }],// <-- how to display when Jan 1 YYYY
    [d3.timeFormat("%b %Y"), function(d) { return (d.getMonth()); }],
    [d3.timeFormat("%d %b %Y"), function(d) { return (d.getDay()); }],
    [function(){return "";}, function(d) { return (d.getDate()) != 1; }]
]);

我想将此代码从 v3 转换为 v4 (d3.JS)，我是初学者，但我尝试过但不起作用:( 感谢您的帮助，我想将此代码从 v3 转换为 v4 (d3.JS) ，我是初学者，但我尝试过但不起作用:(感谢您的帮助