Gündüz saatleri Isı haritası - Renkler gösterilemiyor

Bu benim d3.js ısı haritası grafiğimin kodudur ve sorun renklerdedir. Kodu http://bl.ocks.org/tjdecke/5558084'dan aldım ve json formatında verileri ekleyen bir php'den okumak için değiştirdiler. böylece değiştirdikten sonra, bazı beyaz boşluklar ile siyah renklerde tüm ızgaraları ile bir ısı haritası alıyorum.Gündüz saatleri Isı haritası - Renkler gösterilemiyor

D3 grafiklerinde yeniyim, kodda bulabileceğiniz küçük hatalar için lütfen kusura bakmayın. Bunun yerine

enter image description here

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<html> 
 
    <head> 
 
    <style> 
 
     rect.bordered { 
 
     stroke: #E6E6E6; 
 
     stroke-width:2px; 
 
     } 
 

 
     text.mono { 
 
     font-size: 9pt; 
 
     font-family: Consolas, courier; 
 
     fill: #aaa; 
 
     } 
 

 
     text.axis-workweek { 
 
     fill: #000; 
 
     } 
 

 
     text.axis-worktime { 
 
     fill: #000; 
 
     } 
 
    </style> 
 
    <script src="http://d3js.org/d3.v3.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="chart"></div> 
 
    
 
    <script type="text/javascript"> 
 
     var margin = { top: 50, right: 0, bottom: 100, left: 30 }, 
 
      width = 960 - 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","#253494","#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"]; 
 
     // datasets = ["data1.tsv", "data2.tsv"]; 
 

 

 
\t 
 
     d3.json("heatmaptry2.php", function(error, data) { 
 

 

 
\t \t data.forEach(function(d) { 
 
\t \t console.log(d); 
 
\t \t day= +d.day; 
 
\t \t hour= +d.hour; 
 
\t \t value= +d.value; 
 
\t \t }); \t 
 
\t var colorScale = d3.scale.quantile(); 
 
\t 
 
     var svg = d3.select("#chart").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(-5," + 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 + ", -5)") 
 
      .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); }); 
 
    
 
\t var heatMap = svg.selectAll(".hour") 
 
      .data(data) 
 
      .enter().append("rect") 
 
      .attr("x", function(d) { return (d.hour) * gridSize; }) 
 
      .attr("y", function(d) { return (d.day) * 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; }); 
 
    heatMap.exit().remove();  
 

 
\t 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", 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); 
 

 
      legend.exit().remove(); 
 

 
     }); 
 
     
 

 
     
 
    </script> 
 
    </body> 
 
</html>

kaynak

2016-03-30 Cini09

Lütfen tüm kodlarınızı engellemeyin. Bunun yerine, doğru şekilde biçimlendirmek için kod düğmesini kullanın, bu şu gibi görünür: ** {0 ** – Daedalus

sadece düzenlenmiştir. Umarım iyi olur. – Cini09

da JSON verilerini php – Cyril

var colorScale = d3.scale.quantile();

o (size etki alanını ayarlama değildir) olması gerekirdi

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

çalışma kod here

kaynak

2016-03-30 08:46:33 Cyril

Teşekkür ederim işe yaradı. – Cini09

oy kullanmak istedim ama 15 repo önce izin verilmiyor .. – Cini09

burada cevap olarak kabul edebilirsiniz http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer -iş – Cyril

Gündüz saatleri Isı haritası - Renkler gösterilemiyor

cevap

İlgili konular