无法使用dc修改x轴。js v 2,不识别.x或.xAxis

我希望有人能帮助我理解如何修改x轴,尤其是y轴。我正在使用分布中天/小时的热图示例的修改,并在这个链接上有示例, https://codepen.io/greaney/pen/xLGdBq

.x() .xAxis() 我会出错,否则,其他一切都很好。我认为我使用的是正确的dc版本。js和交叉过滤器。具有d3.js的v3的js。我非常感谢您的帮助。非常感谢。

   var data = [];
var jdata;
var baseTemp;

//d3.json('/camp/datavis/heat/heat.json', function(error,jdata) {
d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json', function(error,jdata) {
console.log("jdata", jdata);
baseTemp = jdata.baseTemperature;
data = jdata.monthlyVariance;

data.forEach(function (d) {
d.variance = +d.variance;
d.temp =  baseTemp  + d.variance;
d.year = +d.year;
d.month = +d.month;
//console.log("d.temp", d.temp);
});

var x = d3.scale.ordinal()
            .domain(data.map(function (d) { return d.name; }))
            //.rangePoints([0, width], 1);
            .rangePoints([0, 20], 1);
            //.rangePoints([0, chart.width], 1);

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickValues(data.map( function(d,i) 
                        {
                //if(i % 9 ===0 ) {
                if(i % 10 ===0 ) {
              return d.year;
              //return d.name;
              }
            })
            .filter(function (d) 
            { 
              if ((d !== undefined)  && (d % 10)) {
               console.log("what d here", d);
                return !!d; 
            } 
            } 
            ));


var chart = dc.heatMap("#test");
console.log("chart",chart);
//console.log("chart",chart.__dcFlag);
//console.log("chartgroup",chart.chartGroup.Scopes);
//chart.xUnits(dc.units.fp.precision(0.1));
//dc.heatMap._chart(function (m) { 
//console.log("what in m", m); });

//.x(d3.scale.linear().domain([0,25]).range([0,86]));
//chart.x(d3.scale.linear().domain([0,33]).range([0,86]))
 // .y(d3.scale.linear().domain([0,80]));

var ndx = crossfilter(data),
    runDim = ndx.dimension(function (d) {
        //return [d.month, d.year, d.variance, d.temp];
        //return [d.year, d.month, d.variance, d.temp];
        return [d.year, d.month];
        //return [d.month, d.year];
        //return [d.temp, d.year, d.month, d.variance];
    }),
    runGroup = runDim.group().reduceSum(function (d) {
        //return +d.temp;
        return d.temp;
    });

//chart.width(45 * 20 + 80)
 //   .height(45 * 5 + 40)
//chart.width(15 * 20 + 80)
chart.width(15 * 40 + 80)
 //.x(d3.scale.ordinal())
  //.xUnits(dc.units.ordinal)

    .height(35 * 10 + 40)
    .dimension(runDim)
    .group(runGroup)
.ordering(function (d) {
       console.log("order d", d);
      var order = {
        //'Jan': 1, 'Feb': 2, 'Mar': 3, 'Apr': 4,
        //'May': 5, 'Jun': 6, 'Jul': 7, 'Aug': 8,
        //'Sep': 9, 'Oct': 10, 'Nov': 11, 'Dec': 12
        1: 'january', 2 : 'feb', 3: 'Mar', 4: 'Apr',
        5:'May', 6:'Jun', 7: 'Jul', 8: 'Aug',
        9:'Sep', 10:'Oct',11: 'Nov', 12: 'Dec'
      };
       console.log("order[0]", order[0]);
      //return order[d.key];
      return order[d.value];
    })
    .keyAccessor(function (d) {
    //console.log('keys', d.key);
    return +d.key[0];
})
    .valueAccessor(function (d) {
    return +d.key[1];
})
//.gap(20)
    .colorAccessor(function (d) {
    //console.log('value', d.value);
    return +d.value;
})
    .title(function (d) {
    return "Month:   " + d.key[1] + "\n" +
        "Year: " + d.key[0]  + "\n" +   
        "Temperature:  " + d.value + "deg F";
})
.colors(["#006837", "#1a9860", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"])
    .calculateColorDomain()//
//.x(d3.time.scale().domain([new Date(2012, 4, 20), new Date(2012, 07, 15)]))
 //       .xUnits(d3.time.years)
 ;
/*
var x = d3.scale.ordinal()
            .domain(data.map(function (d) { return d.name; }))
            //.rangePoints([0, width], 1);
            .rangePoints([0, chart.width], 1);

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickValues(data.map( function(d,i) 
                        {
                if(i % 9 ===0 ) {
              return d.name;
              //return d.year;
              }
            })
            .filter(function (d) 
            { 
               console.log("what d here", d);
                return !!d; 
            } 
            ));
*/
d3.selectAll("chart").attr(function (d) {
console.log("-*****-what here text", d) });
chart.selectAll("chart").select("g").attr(function (d) {
console.log("-------what here text", d) });

chart.render();



});