D3カレンダーの視覚化に値を挿入する

D3カレンダーの視覚化の各セルに出席者の値を表示するのに役立つ必要があります。私はD3の新人であり、このステップでは固執しています。これについて多くの助けを感謝します。可視化D3カレンダーの視覚化に値を挿入する

に使用

サンプル日

Date Station Group Attendance Absent PTO 
2010-07-19 C GH 57 10 0 
2010-07-20 C EF 58 10 1 
2010-09-21 A GH 6 1 1 
2010-09-20 A IJ 6 1 2 
2010-09-17 A AB 6 1 3

HTMLページ

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 




    body { 
     font: 10px sans-serif; 
     shape-rendering: crispEdges; 
    } 

    .day { 
     fill: #fff; 
     stroke: #ccc; 
    } 

    .month { 
     fill: none; 
     stroke: #000; 
     stroke-width: 2px; 
    } 

    .RdYlGn .q10-11{fill:rgb(165,0,38)} 
    .RdYlGn .q9-11{fill:rgb(215,48,39)} 
    .RdYlGn .q8-11{fill:rgb(244,109,67)} 
    .RdYlGn .q7-11{fill:rgb(253,174,97)} 
    .RdYlGn .q6-11{fill:rgb(254,224,139)} 
    .RdYlGn .q5-11{fill:rgb(255,255,191)} 
    .RdYlGn .q4-11{fill:rgb(217,239,139)} 
    .RdYlGn .q3-11{fill:rgb(166,217,106)} 
    .RdYlGn .q2-11{fill:rgb(102,189,99)} 
    .RdYlGn .q1-11{fill:rgb(26,152,80)} 
    .RdYlGn .q0-11{fill:rgb(0,104,55)} 


    .chart rect { 
     fill: steelblue; 
    } 

    .chart text { 
     fill: white; 
     font: 10px sans-serif; 
     text-anchor: end; 
    } 

    </style> 

    <body> 
    <script src="//d3js.org/d3.v3.min.js"></script> 
    <script src="https://d3js.org/d3-time-format.v2.min.js"></script> 

    <script> 

    //For Selecting Distinct Year from Date field for drop down 
    d3.csv("station.csv", function(error, csv) { 
     if (error) throw error; 

     var data = d3.nest() 
     .key(function(d) { return d.Date.split("-")[0]; }) 
     .sortKeys(d3.descending) 
     .rollup(function(v) { return { 
     total: d3.sum(v, function(d) { return d.Attendance; }) 
     }; }) 
     .entries(csv); 

    var dropdown = d3.select('body') 
     .append('select') 
     .attr('class','select') 
     .attr('id','year_dropdown') 
     .on('change', Year_change_Del); 


    var options = dropdown.selectAll('option') 
     .data(data) 
     .enter() 
     .append('option') 
      .text(function (d) { return d.key; }); 
    }); 

    //For Selecting Distinct Year from Date field for drop down 
    d3.csv("station.csv", function(error, csv) { 
     if (error) throw error; 

     var data = d3.nest() 
     .key(function(d) { return d.Station; }) 
     .sortKeys(d3.ascending) 
     .rollup(function(v) { return { 
     total: d3.sum(v, function(d) { return d.Attendance; }) 
     }; }) 
     .entries(csv); 

    var dropdown = d3.select('body') 
     .append('select') 
     .attr('class','select') 
     .attr('id','station_dropdown') 
     .on('change', Year_change_Del); 


    var options = dropdown.selectAll('option') 
     .data(data) 
     .enter() 
     .append('option') 
      .text(function (d) { return d.key; }); 
    }); 

    var width = 1450, 
     height = 190, 
     cellSize = 25; // cell size 


    var percent = d3.format(".1%"), 
     format = d3.time.format("%Y-%m-%d"); 

    var color = d3.scale.quantize() 
     .domain([-.05, .50]) 
     .range(d3.range(11).map(function(d) { return "q" + d + "-11"; })); 

    var month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; 
    var week_days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; 

    function Year_change_Del(){ 

    d3.selectAll('svg').remove(); 
    d3.select(".day").remove(); 

    Year_Change_Create(); 
    }; 

    function Year_Change_Create() { 

    var station_selection = d3.select('#station_dropdown').property('value'); 

    var year_selection = eval(d3.select('#year_dropdown').property('value')), 
      year_start = eval(d3.select('#year_dropdown').property('value')) -2 , 
      year_end = eval(d3.select('#year_dropdown').property('value')) +1 ; 

    //alert(year_end); 


    var svg = d3.select("body").selectAll("svg") 
     .data(d3.range(year_start, year_end).reverse()) 
     .enter().append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("class", "RdYlGn") 
     .append("g") 
     .attr("transform", "translate(" + ((width - cellSize * 53)/2) + "," + (height - cellSize * 7 - 1) + ")"); 

    svg.append("text") 
     .attr("transform", "translate(-45," + 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(-15," + 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("g"); 

    var newrect = rect.append("rect") 
      .attr("id",function(d) { return d.getFullYear(d) + "," + d3.time.weekOfYear(d) * cellSize + "," + d.getDay() * cellSize; }) 
      .attr("class", "day") 
      .attr("width", cellSize) 
      .attr("height", cellSize) 
      .attr("x", function(d) { return d3.time.weekOfYear(d) * cellSize; }) 
      .attr("y", function(d) { return d.getDay() * cellSize; }) 
      .datum(format); 

     newrect.append("title") 
       .text(function(d) { return d ; }); 


    var newrect1 = rect.append("text") 
       .attr("class", "day") 
       .attr("x", function(d) { return d3.time.weekOfYear(d) * cellSize ; }) 
       .attr("y", function(d) { return d.getDay() * cellSize; }) 
       .attr("dy", "15px") 
       .attr("dx", "5px") 
       .style({"font-size":"8px","z-index":"999999999"}) 
       .style("text-anchor", "left") 
       .text(function(d) { return d ; }); 



    // to add month name on top of graph - month name not getting aligned properly 

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

    legend.append("text") 
     .attr("class", function(d,i){ return month[i] }) 
     .style("text-anchor", "end") 
     .attr("dy", "-.45em") 
     .text(function(d,i){ return month[i] }); 

    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("d", monthPath); 

    d3.csv("station.csv", function(csv) { 
    data = csv; 
    dataset = datafilter(data); 

     data=d3.nest() 
     .key(function(d) { return d.Date; }) 
     .rollup(function(d) { return (d[0].Absent * 100)/d[0].Attendance/100; }) 
     .map(dataset);//console.log(JSON.stringify(data)); 

     newrect.filter(function(d) { return d in data; }) 
      .attr("class", function(d) { return "day " + color(data[d]); }) 
     .select("title") 
      .text(function(d) { return d + ": " + percent(data[d]); });  

    function datafilter(d){ 
    data = data.filter(function(d) { return d.Station == station_selection;}); 
    return data;}; 

    }); 

    d3.csv("station.csv", function(csv) { 
    data = csv; 
    dataset = datafilter(data); 

      d3.csv("station.csv", function(csv) { 
    data = csv; 
    dataset = datafilter(data); 

     data=d3.nest() 
     .key(function(d) { return d.Date; }) 
     .rollup(function(d) { return (d[0].Absent * 100)/d[0].Attendance/100; }) 
     .entries(dataset);//console.log(JSON.stringify(data)); 

     rect.filter(function(d) { return d in data; }) 
     .select("text") 
      .text(function(d) { return d + ": " + percent(data[d]); }); 

    function datafilter(d){ 
    data = data.filter(function(d) { return d.Station == station_selection;}); 
    return data;}; 

    }); 




     function monthPath(t0) { 
     var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), 
      d0 = t0.getDay(), w0 = d3.time.weekOfYear(t0), 
      d1 = t1.getDay(), w1 = d3.time.weekOfYear(t1); 
     return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize 
      + "H" + w0 * cellSize + "V" + 7 * cellSize 
      + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize 
      + "H" + (w1 + 1) * cellSize + "V" + 0 
      + "H" + (w0 + 1) * cellSize + "Z"; 
    } 
    }; 

    var formatTime = function(input){ 
     var dateParse = d3.time.format("%Y-%m-%d").parse; 
     var dateFormat = d3.time.format("%Y"); 
     return dateFormat(dateParse(input)); 
    }; 

    var formatTime = function(input){ 
     var dateParse = d3.time.format("%Y-%m-%d").parse; 
     var dateFormat = d3.time.format("%u"); 
     return dateFormat(dateParse(input)); 
    }; 



</Script>

は最初D3.csvは、チャートを作成し、着色、さらにはツールチップが働いているん。 2番目のD3.csvから各セルにデータを挿入しようとしています。しかし、これは動作していません。誰かが私にこれを導くことができますか？

d3.csv("station.csv", function(csv) { 
    data = csv; 
    dataset = datafilter(data); 

     data=d3.nest() 
     .key(function(d) { return d.Date; }) 
     .rollup(function(d) { return (d[0].Absent * 100)/d[0].Attendance/100; }) 
     .map(dataset);//console.log(JSON.stringify(data)); 

     newrect.filter(function(d) { return d in data; }) 
      .attr("class", function(d) { return "day " + color(data[d]); }) 
     .select("title") 
      .text(function(d) { return d + ": " + percent(data[d]); });  

    function datafilter(d){ 
    data = data.filter(function(d) { return d.Station == station_selection;}); 
    return data;}; 

    }); 

    d3.csv("station.csv", function(csv) { 
    data = csv; 
    dataset = datafilter(data); 

      d3.csv("station.csv", function(csv) { 
    data = csv; 
    dataset = datafilter(data); 

     data=d3.nest() 
     .key(function(d) { return d.Date; }) 
     .rollup(function(d) { return (d[0].Absent * 100)/d[0].Attendance/100; }) 
     .entries(dataset);//console.log(JSON.stringify(data)); 

     rect.filter(function(d) { return d in data; }) 
     .select("text") 
      .text(function(d) { return d + ": " + percent(data[d]); }); 

    function datafilter(d){ 
    data = data.filter(function(d) { return d.Station == station_selection;}); 
    return data;}; 

    });

出典

2017-02-07 user7530819

誰が日付付きのd3カレンダーを望んでいますか？

私が作成したフィドルの例です。

var cellSize = 17, // cell size 
 
    width = cellSize * 8, 
 
    height = cellSize * 9, 
 
    firstDayOfEachMonth = getFirstDayOfEachMonth(2013); 
 
\t 
 
var day = d3.time.format("%w"), 
 
    myday = d3.time.format("%d"), 
 
    week = d3.time.format("%U"), 
 
\t monthName = d3.time.format("%B"); 
 
    percent = d3.format(".1%"), 
 
    format = d3.time.format("%Y-%m-%d"); 
 

 
var svg = d3.select("#calendars").selectAll("svg") 
 
    .data(firstDayOfEachMonth) 
 
    .enter().append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
\t // Just centering the month here 
 
    .attr("transform", "translate(" + (width - cellSize * 7 - 1) + "," + ((height - cellSize * 6)/2) + ")"); 
 

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

 
var rect = svg.selectAll("g") 
 
    .data(function(d) { return getDaysInMonth(d); }) 
 
    .enter().append("g") 
 
    .attr("class", "mygroup") 
 
    //.attr("width", cellSize) 
 
    //.attr("height", cellSize) 
 
    //.attr("x", function(d) { return day(d) * cellSize; }) 
 
    //.attr("y", function(d) { return (week(d) - getFirstWeekOfMonth(d)) * cellSize; }) 
 
    //.on("mouseover", function(){d3.select(this).attr("class", "hovered")}) 
 
    //.on("mouseout", function(){d3.select(this).style("background-color", "white")}) 
 
\t //.on("mouseout", function(){d3.select(this).attr("class", "")}) 
 
    // format is a function - a formatter configured to use the format specified above (format = d3.time.format("%Y-%m-%d");) 
 
\t // datum will execute the function to set the data for each item in the dataset - in this case, every day in the year. 
 
\t //.datum(format); 
 

 
rect.append("rect") 
 
    .data(function(d) { return getDaysInMonth(d); }) 
 
    //.enter().append("rect") 
 
    .attr("class", "day") 
 
    .attr("width", cellSize) 
 
    .attr("height", cellSize) 
 
    .attr("x", function(d) { return day(d) * cellSize; }) 
 
    .attr("y", function(d) { return (week(d) - getFirstWeekOfMonth(d)) * cellSize; }) 
 
    .on("mouseover", function(){d3.select(this).attr("class", "hovered")}) 
 
    //.on("mouseout", function(){d3.select(this).style("background-color", "white")}) 
 
\t .on("mouseout", function(){d3.select(this).attr("class", "")}) 
 
    // format is a function - a formatter configured to use the format specified above (format = d3.time.format("%Y-%m-%d");) 
 
\t // datum will execute the function to set the data for each item in the dataset - in this case, every day in the year. 
 
\t .datum(format); 
 

 
rect.append("text") 
 
    //.text(function(d) { return d; }) 
 
    .text(function(d) { return myday(d)}) 
 
\t .attr("x", function(d) { return day(d) * cellSize + 4; }) 
 
    .attr("y", function(d) { return (week(d) - getFirstWeekOfMonth(d)) * cellSize + 12; }) 
 
    
 
rect.append("title") 
 
    // This will display the formatted date for each day in the year when hovered (title attribute) 
 
\t .text(function(d) { return d; }); 
 
\t 
 
d3.select(self.frameElement).style("height", "2910px"); 
 

 
function getDaysInYear(year) { 
 
\t return d3.time.days(new Date(year, 0, 1), new Date(year + 1, 0, 1)); 
 
} 
 

 
function getFirstDayOfEachMonth(year) { 
 
\t return d3.time.months(new Date(year, 0, 1), new Date(year + 1, 0, 1)); 
 
} 
 

 
function getDaysInMonth(firstDayOfMonth) { 
 
\t return d3.time.days(firstDayOfMonth, new Date(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth() + 1, 1)); 
 
} 
 

 
function getFirstWeekOfMonth(day) { 
 
\t // TODO: stop using this. It's wasteful because it gets executed for every day of every month. 
 
\t // We should only do this once per month. The problem is with referencing data throughout a month. 
 
\t // Perhaps use a closure - http://stackoverflow.com/questions/13076553/combining-parent-and-nested-data-with-d3-js 
 
\t // also, the "each" reference in - http://nelsonslog.wordpress.com/2011/04/03/d3-selections/ 
 
\t return week(new Date(day.getFullYear(), day.getMonth(), 1)); 
 
}

body { 
 
    font: 10px sans-serif; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.day { 
 
    fill: #fff; 
 
    stroke: #ccc; 
 
} 
 

 
.month { 
 
    fill: none; 
 
    stroke: #000; 
 
    stroke-width: 2px; 
 
} 
 

 
#calendars rect { 
 
    fill: #ffffff; 
 
    stroke: #bbbbbb; 
 
} 
 

 
#calendars rect.hovered { 
 
    fill: #f0f8ff; 
 
}

<div id="calendars"></div>

出典

2017-05-25 10:41:18 Dushan

D3カレンダーの視覚化に値を挿入する

答えて

関連する問題