Day/Hour Heatmap + mySQL

Question

Я пытаюсь подставить свой набор данных в пример: (http://bl.ocks.org/tjdecke/5558084).

Вот мои d3js:

 var margin = { top: 50, right: 0, bottom: 100, left: 30 }, 
     width = 600 - margin.left - margin.right, 
     height = 430 - margin.top - margin.bottom, 
     gridSize = Math.floor(width/24), 
     legendElementWidth = gridSize*2, 
     buckets = 9, 
     colors =  ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#25 3494","#081d58"], // alternatively colorbrewer.YlGnBu[9] 
     days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], 
     times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"]; 


d3.json("/test/heatmap.php", function(error, data) { 
data.forEach(function(d) { 
    console.log(d); 
    day= +d.day; 
    hour= +d.hour; 
    value= +d.value; 
}); 
    }, 
    function(error, data) { 
     var colorScale = d3.scale.quantile() 
      .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })]) 
      .range(colors); 
      console.log(d3.max(data, function (d) { return d.value; })) 
      ; 
console.log("test"); 

     var svg = d3.select(".wpd3-8-3").append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     var dayLabels = svg.selectAll(".dayLabel") 
      .data(days) 
      .enter().append("text") 
      .text(function (d) { return d; }) 
      .attr("x", 0) 
      .attr("y", function (d, i) { return i * gridSize; }) 
      .style("text-anchor", "end") 
      .attr("transform", "translate(-6," + gridSize/1.5 + ")") 
      .attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); }); 

     var timeLabels = svg.selectAll(".timeLabel") 
      .data(times) 
      .enter().append("text") 
      .text(function(d) { return d; }) 
      .attr("x", function(d, i) { return i * gridSize; }) 
      .attr("y", 0) 
      .style("text-anchor", "middle") 
      .attr("transform", "translate(" + gridSize/2 + ", -6)") 
      .attr("class", function(d, i) { return ((i >= 7 && i <= 16)  ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); }); 

     var heatMap = svg.selectAll(".hour") 
      .data(data) 
      .enter().append("rect") 
      .attr("x", function(d) { return (d.hour - 1) * gridSize; }) 
      .attr("y", function(d) { return (d.day - 1) * gridSize; }) 
      .attr("rx", 4) 
      .attr("ry", 4) 
      .attr("class", "hour bordered") 
      .attr("width", gridSize) 
      .attr("height", gridSize) 
      .style("fill", colors[0]); 

     heatMap.transition().duration(1000) 
      .style("fill", function(d) { return colorScale(d.value); }); 

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

     var legend = svg.selectAll(".legend") 
      .data([0].concat(colorScale.quantiles()), function(d) {  return d; }) 
      .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", gridSize/2) 
     .style("fill", function(d, i) { return colors[i]; }); 

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

И пример моего PHP эхо:

[{"day":"4","hour":"0","value":"91"},{"day":"7","hour":"0","value":"93"},{"day":"3","hour":"1","value":"71"},{"day":"4","hour":"1","value":"90"},{"day":"3","hour":"2","value":"96"},{"day":"4","hour":"2","value":"89"},{"day":"5","hour":"2","value":"88"},{"day":"3","hour":"3","value":"97"},{"day":"4","hour":"3","value":"88"},{"day":"5","hour":"3","value":"88"},{"day":"6","hour":"3","value":"89"},{"day":"4","hour":"4","value":"86"},{"day":"5","hour":"4","value":"86"},{"day":"6","hour":"4","value":"88"},{"day":"7","hour":"4","value":"91"},{"day":"4","hour":"5","value":"86"},{"day":"6","hour":"5","value":"88"},{"day":"7","hour":"5","value":"91"},{"day":"6","hour":"6","value":"88"},{"day":"7","hour":"6","value":"91"},{"day":"6","hour":"7","value":"86"},{"day":"6","hour":"8","value":"86"},{"day":"6","hour":"9","value":"86"},{"day":"6","hour":"10","value":"86"},{"day":"6","hour":"11","value":"85"},{"day":"3","hour":"12","value":"91"},{"day":"4","hour":"12","value":"82"},{"day":"5","hour":"12","value":"82"},{"day":"6","hour":"12","value":"84"},{"day":"4","hour":"13","value":"82"},{"day":"6","hour":"13","value":"85"},{"day":"6","hour":"14","value":"87"},{"day":"6","hour":"15","value":"88"},{"day":"6","hour":"16","value":"88"},{"day":"6","hour":"17","value":"88"},{"day":"6","hour":"18","value":"88"},{"day":"6","hour":"19","value":"89"},{"day":"6","hour":"20","value":"90"},{"day":"6","hour":"21","value":"91"},{"day":"6","hour":"22","value":"91"},{"day":"6","hour":"23","value":"93"}] 

Я в тупик, потому что, когда я вхожу результаты d3.json, что соответствует результатам файла примера. То, что я заметил, приведен в примере,

console.log(d3.max(data, function (d) { return d.value; })) 

грузы с максимальным значением. Когда я загружаю свои значения, console.log, похоже, не печатает за шагом d3.json.

Любые советы? Через несколько дней я читал и экспериментировал.

Спасибо!

Answer 1

У вас есть 2 функции в вызове json (один для ошибки и один для успеха?). Вам нужен только один - вы сначала проверяете, есть ли ошибка, и выполняйте обработку ошибок.

Таким образом, вы можете удалить эту

function(error, data) { 
    data.forEach(function(d) { 
     console.log(d); 
     day= +d.day; 
     hour= +d.hour; 
     value= +d.value; 
    }); 
}, 

Кроме того, это в основном хорошо - просто, что вам нужно настроить й атр вызова немного - вам не нужен -1

.attr("x", function (d) { return (d.hour) * gridSize; })