Я создаю приложение с D3.js, которое отображает данные на карте дерева -. В идеале я хотел бы дать карте дерева -подсказку инструмента -для отображения дополнительной информации о каждом узле карты дерева -. Карта дерева -получает данные из файла.JSON.
В настоящее время я работаю с плагином jquery -в Poshy Tip
, где я могу передать эту информацию через атрибут title=
. Я знаю, что мне нужно каким-то образом добавить атрибут title к элементу svg :g на карте дерева -, но я не могу понять, где я устанавливаю атрибут заголовка каждого узла.
Вот начало моего сценария, где я делаю все свои заявления и т.д...
<div id="chart"></div>
<script type="text/javascript">
var tree = d3.layout.tree()
.size([h, w - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(40,0)");
d3.json("test.json", function(json) {
json.x0 = 800;
json.y0 = 0;
update(root = json);
});
Вот как я использую poshytip()
в голове
$(function(){
$('node').poshytip({slide: false, followCursor: true, alignTo: 'cursor',
showTimeout: 0, hideTimeout: 0, alignX: 'center', alignY: 'inner-bottom',
className: 'tip-twitter'});
}
В значительной степени я просто хочу иметь возможность «навести курсор» на отдельные элементы в интерактивной карте дерева -и получить всплывающую подсказку -.., но мне не повезло. Как я могу установить для каждого элемента определенный идентификатор... сделать это в файле.JSON? Есть ли более простой способ сделать это? Я иду об этом в неправильном порядке? Любая помощь будет здорово.