代码之家  ›  专栏  ›  技术社区  ›  user2517542

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

  •  1
  • user2517542  · 技术社区  · 7 年前

    我希望有人能帮助我理解如何修改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();
    
    
    
    });
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Gordon    7 年前

    您可能会遇到以下常见问题: 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);