Я использую d3.js treemap в приложении с backbone.js. Карта дерева правильно отображается с первыми данными JSOn, но последующие вызовы с другими данными JSON не приводят к повторной визуализации карты дерева.
Мой HTML выглядит так:
<html>
<head>
<title>Jenkins analytics</title>
<!-- stylesheets -->
<link rel="stylesheet" href="css/spa.css" type="text/css"/>
<link rel="stylesheet" href="css/treemap.css" type="text/css"/>
</head>
<body>
<nav>
<form>
<fieldset>
<label for="chart">Chart:</label>
<select id="chart" name="chart">
<option value="treemap" selected>Treemap</option>
<option value="motion">MotionChart</option>
</select>
</fieldset>
</form>
<form>
<fieldset>
<label for="period">Period:</label>
<select id="period" name="period">
<option value="lastday" selected>Day</option>
<option value="lastweek">Week</option>
<option value="lastmonth">Month</option>
</select>
<label for="team">Team:</label>
<select id="team" name="team">
<option value="all" selected>all</option>
<option value="spg">spg</option>
<option value="beacon">beacon</option>
<option value="disco">disco</option>
</select>
<label for="status">Status:</label>
<select id="status" name="status">
<option value="" selected>all</option>
<option value="SUCCESS">success</option>
<option value="FAILURE">failure</option>
<option value="ABORTED">aborted</option>
</select>
</fieldset>
</form>
<form>
<fieldset>
<label for="duration">Duration</label>
<input id="duration" type="radio" name="mode" value="size" checked />
<label for="count">Count</label>
<input id="count" type="radio" name="mode" value="count" />
<label for="average">Average</label>
<input id="average" type="radio" name="mode" value="avg" />
</fieldset>
</form>
</nav>
<div id="container" />
<!-- Third party javascript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="script/underscore/underscore.js" charset="utf-8"></script>
<script type="text/javascript" src="script/backbone/backbone.js" charset="utf-8"></script>
<script type="text/javascript" src="script/d3/d3.v3.js" charset="utf-8"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Application javascript -->
<script type="text/javascript" src="script/module.js"></script>
<!-- Startup -->
<script>
var navview = new NavViewer();
</script>
</body>
</html>
script/module.js выглядит так:
var NavViewer = Backbone.View.extend({
el: 'nav',
events: {
"change #chart": "change_chart",
"change #period": "change_period",
"change #team": "change_team",
"change #status": "change_status"
},
initialize: function() {
console.log("NavViewer.initialize");
this.d3view = new D3Viewer();
this.active_view = this.d3view;
},
change_chart: function(e) {
console.log("NavViewer.change_chart");
},
change_period: function(e) {
var _period = $('#period').val();
console.log("NavViewer.change_period to " + _period);
this.active_view.load();
},
change_team: function(e) {
var _team = $('#team').val();
console.log("NavViewer.change_team to "+ _team);
this.active_view.load();
},
change_status: function(e) {
var _status = $('#status').val();
console.log("NavViewer.change_status to " + _status);
this.active_view.load();
}
});
var JenkinsViewer = Backbone.View.extend({
el: '#container',
server: "http://192.168.1.100:5000",
url_fragment: function() {
var _period = $('#period').val();
var _team = $('#team').val();
var _status = $('#status').val();
return "when=" + _period +
(_team == "all" ? "" : ("&" + "team=" + _team)) +
(_status == "" ? "" : ("&" + "status=" + _status));
}
});
var D3Viewer = JenkinsViewer.extend({
initialize: function() {
this.margin = {top: 8, right: 0, bottom: 0, left: 0};
this.width = 1200 - this.margin.left - this.margin.right;
this.height = 800 - this.margin.top - this.margin.bottom - 60;
this.container = d3.select(this.el);
this.color = d3.scale.category20c();
this.base_url = this.server + "/team_build";
this.treemap = d3.layout.treemap()
.size([this.width, this.height])
.sticky(true)
.value(function(d) { return d.size; });
this.position = function() {
this.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
};
/* style the container */
this.container
.style("position", "relative")
.style("width", this.width + "px")
.style("height", this.height + "px")
.style("left", this.margin.left + "px")
.style("top", this.margin.top + "px")
.style("border", "1px solid black");
/* tootlip is appended to container */
this.tooltip = this.container.append("div")
.attr('class', 'tooltip')
.style("visibility", "hidden")
.style("background-color", "#ffffff");
this.load();
},
load: function() {
var $container = this.container;
var color = this.color;
var treemap = this.treemap;
var position = this.position;
var tooltip = this.tooltip;
var url = this.base_url + "?" + this.url_fragment();
console.log("D3View.load: " + url);
d3.json(url, function(error, root) {
/* 'root' actually means the data retrieved by the xhr call */
var node = $container.datum(root)
.selectAll(".node")
.data(treemap.nodes);
node.enter().append("div")
.attr("class", "node")
.call(position)
.style("background", function(d) { return d.children ? color(d.name) : null; })
.text(function(d) { return d.children ? null : d.name; })
.on("mouseover", function(d) {
tooltip.html(d.name + ": " + Math.floor(d.value))
.style("visibility", "visible");
this.style.cursor = "hand";
})
.on("mouseout", function(){
tooltip.style("visibility", "hidden");
});
d3.selectAll("input").on("change", function change() {
var functions = {
count: function(d) { return d.count; },
size: function(d) { return d.size; },
avg: function(d) { return d.size / d.count; }
};
var value = functions[this.value];
node
.data(treemap.value(value).nodes)
.transition()
.duration(1500)
.call(position);
});
});
return true;
}
});
Вот что я сделал:
- прочитайте код
d3.jsдля d3.json и d3.layout.treemap - погуглил живые дневные светы из этого
- прочтите ответы Ларса Котхоффа по d3.js на StackOverflow
- прочитать некоторые статьи: Вход и выход, D3.js: как обрабатывать динамические данные JSON
- пытался
treemap.sticky(false) - пытался добавить
node.exit().remove()
Я думаю, что проблема может быть связана с залипанием или отсутствием вызова node.exit().remove(). Я пытался изменить оба из них без успеха. Однако, чтобы получить интерактивный пользовательский интерфейс на стороне клиента, я думаю, мне нужно использовать treemap.sticky(true).
Я подтвердил, что каждый раз, когда я обращаюсь к службе REST API, я получаю разные JSON. Я подтвердил, что container.datum().children изменяется в размере между вызовами, подтверждая для меня, что это вопрос древовидной карты, а не повторного рендеринга.
D3.js: How to handle dynamic JSON Data выглядит очень актуально:
- «Стоит отметить, что если у вас уже есть данные с тем же ключом, d3.js сохранит данные в узле, но по-прежнему будет использовать исходные данные».
- «Когда я начал играть с d3.js, я думал, что визуализированные данные будут обрабатываться событиями и реагировать на изменение масштабов, доменов и прочего. Это не так. Вы должны указать d3.js обновить текущие данные, иначе они останутся там. , не синхронизировано."
- «Я присваиваю результат data() переменной, потому что enter() влияет только на новые данные, которые не привязаны к узлам».
load()как для начального, так и для последующих вызовов данных? Потому что как есть, он устанавливает атрибуты только для новых элементов, а не для существующих с измененными данными. Прочитайте этот ответ для более подробного объяснения: stackoverflow.com/a/20754006/3128209 - person AmeliaBR schedule 10.01.2014load(). Я исправлю в эту субботу и опубликую исправленный код. Однако, поскольку это явно вырезанный и вставленный код, было бы неплохо, если бы в этом примере D3 также использовались лучшие практики. Спасибо за вашу помощь. - person hughdbrown schedule 10.01.2014