javascript - 无法使用 dc.js v 2 修改 x 轴，无法识别 .x 或 .xAxis

Question

我希望有人能帮助我理解如何修改 x 轴和 y 轴。我正在使用分发版中天数/小时的热图示例的修改，并在此链接上有示例， https://codepen.io/greaney/pen/xLGdBq

当我尝试使用 .x() 和 .xAxis() 修改轴时出现错误，否则其他一切正常。我想我使用的是正确版本的 dc.js 和 crossfilter.js 以及 v3 的 d3.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();



});

Answer 1

您可能遇到过以下常见问题解答:Why does everything break after a call to .xAxis or .yAxis??

您应该在完全不同的行上修改 .xAxis() 以减少混淆。它返回一个轴对象，轴的每个方法也返回一个轴对象。没有办法回去。

所以为了减少混淆:

var xAxis = chart.xAxis().foo().bar().qux().baz();

与 .x() 的处理相同，尽管它不经常出现。如果您使用参数调用这些方法中的任何一个，则会返回图表。如果您在不带参数的情况下调用它们，则会返回该特定对象而不是图表。

同样，您可能不想替换 xAxis 对象。只需从图表中检索并修改它，如上所示。更换比例尺很常见，而且经常是必要的，但由于轴对象只有一个实现，因此没有理由更换它。只需调用它的方法来改变它上面的东西。

它并没有做你正在做的事情，而是 this example说明该技术:

spendHistChart
    .width(300).height(200)
    .dimension(spendDim)
    .group(nonEmptyHist)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .elasticX(true)
    .elasticY(true);
spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);