Добавление hyeperlinks к масштабируемому пакету d3 circle

Я пытаюсь добавить интерактивные гиперссылки к масштабируемому пакету d3 circle на основе этого кода: http://bl.ocks.org/nilanjenator/4950148, но я просто не могу заставить его работать. В идеале я бы связал ссылку под текстовой меткой для круга, но в этот момент кликабельная метка будет равна раду.Добавление hyeperlinks к масштабируемому пакету d3 circle

Я уверен, что это неправильное понимание d3 с моей стороны. Я исследовал несколько тем стека, которые должны работать: (Hyperlinks in d3.js objects), и вот мои неудачные попытки. Я также обновил файл данных json, чтобы включить URL-адреса, т.е.

{ 
"name": "data", 
"children": [ 
    {"name": "Data", "size": 20544, "url":"http://katetempest.co.uk/audio"}, 
    {"name": "Ellington Willoughby", "size": 19788, "url": "http://wwww.ellingotnwilloughby.com"}, 
    {"name": "HELP", "size": 10349,"url":"http://en.wikipedia.org/wiki/Help!_%28album%29" }, 

    {

т.д.

Первая авария и burn..adding в XLink либо круг или текст, или узел, как указано в других вопросах стеки. Вот где мое понимание d3 ломается.

vis.selectAll(".node")//also tried "cirlce" and "text" 
.append("svg:a").attr("xlink:href", function(d){ return d.url }) 
    .append("svg:text") 
    .text(function(d) { return d.name; }) 
    .attr("dy", 3.5) 
    .attr("dx", 5.5) 
    .attr("text-anchor", "bottom");

Я добавил

<html xmlns:xlink="http://www.w3.org/1999/xlink">

моему HTML в начале проекта. Но ничего не происходит.

Следующая сгореть - Добавление на "OnClick" события к тексту, такие как:

vis.selectAll("text") 
    .data(nodes) 
    .enter().append("svg:text") 
    .attr("class", function(d) { return d.children ? "parent" : "child"; }) 
    .attr("x", function(d) { return d.x; }) 
    .attr("y", function(d) { return d.y; }) 
    .attr("dy", ".35em") 
    .attr("text-anchor", "middle") 
    .style("opacity", function(d) { return d.r > 20 ? 1 : 0; }) 
    .text(function(d) { return d.name; }) 
    .on("click",function(d){window.location = d.url}); ///<----Party here? Nope!

I'v также удостоверились, чтобы установить мой CSS, как:

circle.child { 
pointer-events: all; 
}

Поскольку я прочитал это мешает подсказкам и общему clickable thingamajigs и т. д.

Так что я делаю неправильно? Я почти уверен, что его отсутствие понимания того, какой элемент выбрать и добавить «svg: a» attr, но я застрял, что, конечно же, облом. Экспоненциально благодаря сообществу стека за то, что он взломал ее, и извиняется, если я посмотрю что-то тривиальное и потратил время на все.

Cheers!

источник

2014-10-31 Tim Gottgetreu

Предполагая, что вы заимствовали CSS из приведенного вами примера, ваша техника window.location не работает, потому что в CSS у вас есть текст {pointer-events: none} '. Установите его в 'text {pointer-events: all}'. – FernOfTheAndes

Ах, да, это делает текстовое событие «onclick». Спасибо, что указали, что я изменил неправильный CSS. Ура! –

Благодаря комментарию FernOfTheAndes я смог получить все это. Просто подумал, что я отправлю, если кто-то другой столкнется с этим. Я изменил «OnClick» круг событие, чтобы только ссылку на работу, если вы на самом нижнем круге, в противном случае его немного грязный ... здесь вы идете:

vis.selectAll("circle") 
    .data(nodes) 
    .enter().append("svg:circle") 
    .attr("class", function(d) { return d.children ? "parent" : "child"; }) 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", function(d) { return d.r; }) 
    .on("click", function(d) { 

    //Enables links when elements have no childern 
    if(typeof d.children === 'undefined'){ 
     vis.selectAll("text") 
     .style("pointer-events","all") 
    } 
    else 
    { 
     vis.selectAll("text") 
     .style("pointer-events","none") 
    } 

    return zoom(node == d ? root : d); 

    });

и в CSS для разрешить доступ к бездетным кругам (я думаю):

circle.child { 
pointer-events: all;

}

Еще раз спасибо сообществу стеки!

источник

2014-10-31 18:16:14

Добавление hyeperlinks к масштабируемому пакету d3 circle

ответ

Смежные вопросы