Question

为日历视图图建立图例

但是我试图建立一个传奇，就像图片中所示的那样

但我无法生成此

这是我生成日历视图的代码

var Comparison_Type_Max = d3.max(inputData, function(d) { return d.value; });

        var data = d3.nest()
        .key(function(d) { return d.Date; })
        .rollup(function(d) { return  (d[0].value ); })
        .map(inputData);

         var margin = { top: 20, right: 50, bottom: 10, left: 60 }, 
         width = $(dom_element_to_append_to).parent().width() - margin.left - margin.right,         
         cellSize = Math.floor(width/52), 
         height = cellSize * 7 + margin.top + margin.bottom ,
         week_days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
         month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
         $rootScope.defaultWidth = width;
         $rootScope.cellSize = cellSize;
         var day = d3.time.format("%w"),
         week = d3.time.format("%U"),
         percent = d3.format(".1%"),
         format = d3.time.format("%Y%m%d"),
         legendElementWidth = cellSize * 2,
         buckets = 9,
         parseDate = d3.time.format("%Y%m%d").parse;

         var color = d3.scale.linear().range(colorRange)
         .domain([0, 1]);
         var colorScale = d3.scale.quantile()
        .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
        .range(colorRange);

         var svg = d3.select(dom_element_to_append_to).selectAll("svg")
         .data(d3.range(year, year+1))
         .enter().append("svg")
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
         .attr("data-height", '0.5678')
         .attr("class", "RdYlGn")
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        //.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
        console.log("1");

        svg.append("text")
        .attr("transform", "translate(-38," + cellSize * 3.5 + ")rotate(-90)")
        .style("text-anchor", "middle")
        .text(function(d) { return d; });

        for (var i=0; i<7; i++)
        {    
            svg.append("text")
            .attr("transform", "translate(-5," + cellSize*(i+1) + ")")
            .style("text-anchor", "end")
            .attr("dy", "-.25em")
            .text(function(d) { return week_days[i]; }); 
        }

        var rect = svg.selectAll(".day")
        .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter()
        .append("rect")
        .attr("class", "day")
        .attr("width", cellSize)
        .attr("height", cellSize)
        .attr("x", function(d) { return week(d) * cellSize; })
        .attr("y", function(d) { return day(d) * cellSize; })
        .attr("fill",'#fff')
        .datum(format);
        console.log("2");



      /*  var legend = svg.selectAll(".legend")
        .data(data)
        .enter().append("g")
        .attr("class", "legend");
        //.attr("transform", function(d, i) { return "translate(" + (((i+1) * cellSize*4.33)) + ",0)"; });

        legend.append("rect")
        .attr("x", function(d, i) { return legendElementWidth * i; })
        .attr("y", height)
        .attr("width", legendElementWidth)
        .attr("height", cellSize / 2)
        .style("fill", function(d, i) { return color(Math.sqrt(data[d] / Comparison_Type_Max )); });


        legend.append("text")
        .attr("class", "mono")
        .text(function(d) { return "≥ " + Math.round(d); })
        .attr("x", function(d, i) { return legendElementWidth * i; })
        .attr("y", height + cellSize);
        */


        var legend = svg.selectAll(".legend")
        .data([0].concat(colorScale.quantiles()), function(d) { return d; });

        legend.enter().append("g")
        .attr("class", "legend");

        legend.append("rect")
        .attr("x", function(d, i) { return legendElementWidth * i; })
        .attr("y", height)
        .attr("width", legendElementWidth)
        .attr("height", cellSize / 2)
        .style("fill", function(d, i) { return color(Math.sqrt(data[i] / Comparison_Type_Max )); });

        legend.append("text")
        .attr("class", "mono")
        .text(function(d) { return "≥ " + Math.round(d); })
        .attr("x", function(d, i) { return legendElementWidth * i; })
        .attr("y", height + cellSize);

        legend.exit().remove();

        svg.selectAll(".month")
        .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("path")
        .attr("class", "month")
        .attr("id", function(d,i){ return month[i] + "" + varID })
        .attr("d", monthPath);





        console.log("4");

        var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
            var year = d/10000;
            year = Math.floor(year);
            var month = d/100;
            month = Math.floor(month % 100);
            var day = d % 100;
            if(day<10) day = "0" + day;
            if(month < 10) month = "0" + month;

            if(isCurrency)
             return  "<div><span>Date:</span> <span style='color:white'>" + day + "/" + month + "/" + year + "</span></div>" +
       "<div><span>Value:</span> <span style='color:white'><span>&#8377</span>" + d3.format(",")(data[d]) + "</span></div>";
       else
             return  "<div><span>Date:</span> <span style='color:white'>" + day + "/" + month + "/" + year + "</span></div>" +
       "<div><span>Value:</span> <span style='color:white'>" + d3.format(",")(data[d]) + "</span></div>"; 

 });

        console.log("5");

        svg.call(tip);

        console.log("6");

        rect.filter(function(d) { return d in data; })
        .on("click", function(d){
            console.log(d);
            var year = d/10000;
            year = Math.floor(year);
            var monthInt = d/100;
            console.log(dom_element_to_append_to);
            var val,id;
            if(dom_element_to_append_to=='.sms-yearheatmap-container-negative')
             val = 0;
       else if (dom_element_to_append_to=='.sms-yearheatmap-container-positive')
             val = 1;
       else val = 2;

       monthInt = Math.floor(monthInt % 100);
       for (var itr = 0; itr<12; ++itr) {
             id = month[itr] + "" + varID;
             $('#' + id).css("z-index",0);
             $('#' + id).css("stroke","#000");
             $('#' + id).css("stroke-width", "2.5px");
       }
       id = month[monthInt-1] + "" + varID;
       $('#' + id).css("stroke","blue");
       $('#' + id).css("position","relative");
       $('#' + id).css("z-index",1000);
       $('#' + id).css("stroke-width", "4.5px");
       console.log("year " + year + " month" + monthInt);
       $rootScope.loadDayHourHeatGraph(year, monthInt , val, isCurrency);
 })
        .attr("fill", function(d) { return color(Math.sqrt(data[d] / Comparison_Type_Max )); })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);
        /*.attr("data-title", function(d) { return "value : "+Math.round(data[d])});   
        $("rect").tooltip({container: 'body', html: true, placement:'top'}); */
      /*  $("rect").on("click", function(d) {
            console.log(d);
      });*/

      function numberWithCommas(x) {
         x = x.toString();
         var pattern = /(-?\d+)(\d{3})/;
         while (pattern.test(x))
          x = x.replace(pattern, "$1,$2");
    return x;

它正确地生成了图形，但我的传说并没有随之生成这里是我上面写的传奇代码

 var legend = svg.selectAll(".legend")
        .data([0].concat(colorScale.quantiles()), function(d) { return d; });

        legend.enter().append("g")
        .attr("class", "legend");

        legend.append("rect")
        .attr("x", function(d, i) { return legendElementWidth * i; })
        .attr("y", height)
        .attr("width", legendElementWidth)
        .attr("height", cellSize / 2)
        .style("fill", function(d, i) { return color(Math.sqrt(data[i] / Comparison_Type_Max )); });

        legend.append("text")
        .attr("class", "mono")
        .text(function(d) { return "≥ " + Math.round(d); })
        .attr("x", function(d, i) { return legendElementWidth * i; })
        .attr("y", height + cellSize);

        legend.exit().remove();

我不想使用colorscale变量而是想根据主代码中定义的颜色变量生成图例，colorcale变量不会在代码中的任何地方使用，而只会在图例中用于首先，使用颜色变量

提供的colorscheme生成整个日历视图

传说没有产生

0 个答案: