d3.js白天小時熱圖在服務器重新啟動時加載，但在刷新頁面時消失
[英]d3.js Day Hour Heatmap loads on server restart, but disappears when the page is refreshed
問題描述
我手上的情況很奇怪，我不確定如何解決。 我會說我是Angular.js和D3.js的新手，所以，如果您看到newb錯誤，可能不是錯字，那是我做錯了什么。
無論如何-我正在使用帶有m2e和tomcat插件的Eclipse，並直接從IDE運行。 我正在嘗試使用在這里找到的示例代碼加載日/小時熱圖： blocks.org
我做了一個小小的更改，而不是d3.tsv調用，而是使用d3.json並實現了REST調用來檢索json。 這里有趣的部分是，每當我重新啟動服務器並加載頁面時，我都會看到應該顯示的熱圖。 但是，如果刷新頁面，它將消失。 如果我在新標簽頁中加載頁面，則該頁面也不會出現。
奇怪的是，當我關閉並重新打開瀏覽器時，它確實出現了，但隨后在刷新和新選項卡后又消失了。
每次刷新頁面時，我都可以看到Eclipse控制台中正確調用了REST調用。 我還可以在瀏覽器的javascript控制台中看到JSON數據正確顯示。 無論是否顯示熱圖，這些事情都可以正確發生。
以下是我認為與之相關的一些代碼，如有必要，請隨時請求更多代碼段。
REST控制器方法
@RequestMapping(value="/heatmap", method=RequestMethod.GET, produces={"application/json"})
public @ResponseBody String getHeatMapValues(){
return heatMapValues;
}
index.html
//Assume all standard javascript imports here are correct (the thing does work correctly at least once, and I'd have bigger errors anyways
<body>
<div class="panel panel-default" ng-app="Hello" ng-controller="myCtrl">
<div class="panel-heading">
<h2 class="panel-title">VISUALIZATIONS</h2>
</div>
<div class="panel-body">
<div class="col-lg-1"></div>
<div role="tabpanel" class="col-lg-10" style="border: 2px solid black">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" ng-repeat="tab in tabs" ng-click=selectTab($index) ng-class="{'active':selectedTab == $index}">
<a data-target="#tab" aria-controls="home" role="tab" data-toggle="tab">{{tab.id}}</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab" ng-include="tabs[selectedTab].template">
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
</div>
</body>
script.js（是的，我稍后會適當地分解javascript代碼，現在我只希望一切正常）
var app = angular.module('Hello', ['ui.bootstrap']);
app.controller('myCtrl', function Hello($scope, $http) {
$scope.tabs = [{id:"Main",template: "partials/main.html"},{id: "Clustering",template: "partials/clustering.html"}];
$scope.selectedTab=0;
$scope.selectTab = function(index){
$scope.selectedTab = index;
}
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"];
d3.json("/heatmap",
function(error, data) {
var colorScale = d3.scale.quantile()
.domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
.range(colors);
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(-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);
});
}
partials / main.html
<div id="chart"></div>
partials / clustering.html
<b>hi there</b>
1 個解決方案
解決方案1
0 已采納 2015-08-18 19:14:05
我找到了答案。 我當時以為這是D3中的狀態問題。 實際上，答案要簡單得多。
因為我只是測試圖表，所以將d3代碼放入將在啟動時執行的角度控制器中。 這導致了d3腳本（正在使用id =“ chart”搜索div）與仍在加載html的DOM之間的競爭。
我更改了應用程序控制器以包含以下內容：
$scope.init = function(){
//d3 chart script
}
我還更改了main.html，使其看起來像這樣：
<div id="chart" data-ng-init="init()"></div>
現在，每次都始終如一地加載！
d3.js熱圖圖例
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.