Добавление атрибута title к элементу svg :g в D3.js

Я создаю приложение с 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? Есть ли более простой способ сделать это? Я иду об этом в неправильном порядке? Любая помощь будет здорово.

10
задан accraze 25 February 2016 в 20:28
поделиться