d3.js日小时热图加载服务器重启，但消失时，页面刷新
d3.js Day Hour Heatmap loads on server restart, but disappears when the page is refreshed
我手上有一个非常奇怪的情况，我不知道如何解决它。我会说我是Angular.js和D3.js的新手，所以如果你看到一个新错误，那可能不是打字错误，而是我做错了什么。
无论如何-我使用Eclipse与m2e和tomcat插件和直接从IDE运行。我试图加载一天/小时热图与示例代码我发现在这里:blocks.org
我做了一个小的改变，而不是d3。tsv调用，我用d3。并实现一个REST调用来检索json。这里有趣的部分是，每当我重新启动服务器并加载页面时，我都会看到应该出现的热图。但是，如果我刷新页面，它就消失了。如果我在新选项卡中加载页面，它也不会出现。
奇怪的是，当我关闭并重新打开浏览器时，它确实出现了，但随后又消失了，刷新和新的选项卡。
每次刷新页面时，我都可以看到在eclipse控制台中正确调用REST调用。我还可以看到JSON数据正确地出现在浏览器的javascript控制台中。无论热图是否出现，这些事情都会正确发生。
下面是我的一些代码，我认为将是相关的，如果有必要，请随时要求更多的片段。
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);
});
}
泛音/main.html
<div id="chart"></div>
泛音/clustering.html
<b>hi there</b>
我找到答案了。我认为这是D3内部的状态问题。实际上答案要简单得多。
因为我只是在测试图表，所以我把d3代码放在我的角控制器中，它将在启动时执行。这会导致d3脚本(正在搜索id="chart"的div)和仍在加载html的DOM之间的竞争条件。
我改变了我的应用控制器来包含这个:
$scope.init = function(){
//d3 chart script
}
我也把main.html改成这样:
<div id="chart" data-ng-init="init()"></div>
现在每次加载都是一致的!
相关文章：
- 强制模板刷新ember.js
- 有角度的$http.put条目在页面刷新时消失
- 在页面刷新和关闭浏览器中消失-webstorage
- 在本地使用浏览器历史记录时刷新页面后数据消失
- 使用 ajax 分配文本框值 - 页面仍在刷新，分配的值已消失
- Chart.js只随机出现，在页面刷新时消失
- AngularJS动态内容在页面刷新时消失
- 如何使图像即使在页面刷新时也不会消失
- 谷歌地图上的点击信息窗口消失后刷新周期
- RadioButton's CheckedChanged在刷新后消失
- 如何为一个样式表每次刷新随机图像，但在选择另一个样式表时消失
- 在我的评论应用程序，当我刷新页面评论消失
- 加载程序只在刷新页面时消失
- d3.js日小时热图加载服务器重启，但消失时，页面刷新
- 当隐藏/显示导航栏时，当页面刷新时，导航栏是可见的，当我滚动时，导航栏就消失了
- 响应中的XML在刷新时消失
- 使用AngularJS保存JSON数据到服务器-在页面刷新时消失
- 如果我在ie9中刷新页面，Facebook登录按钮消失
- 猫头鹰旋转木马在初始加载后消失，没有刷新
- 加载.xml文件中的内容有时会出现在我的网页上，但当我刷新时，它会消失.(JavaScript， jquery， aja
