Как добиться того, чтобы пузыри были доступны только при полном увеличении d3js

У меня тут небольшая проблема:

Я работаю с этим примером (http://bl.ocks.org/mbostock/7607535 ) и изменил файл flash.json следующим образом:

{
  "name": "flare",
"children": [
{
"name": "Kommunikation und Umwelt",
"children": [

{
 "name": "Courses",
 "children": [
  {
   "name": "AO-Psy.",
   "children": [
    {"name": "Prof. A", "size": 5731,"url":"index.html"},
    {"name": "Prof. B", "size": 5731},
    {"name": "Prof. C", "size": 5731}
   ]
  },
  {
   "name": "E&E",
   "children": [
    {"name": "Prof. D", "size": 5731},
    {"name": "Prof. E", "size": 5731},
    {"name": "Prof. F", "size": 5731},
    {"name": "Prof. G", "size": 5731},
    {"name": "Prof. H", "size": 5731}
   ]
  },
  {
   "name": "IBSS",
   "children": [
    {"name": "Prof. I", "size": 5731},
    {"name": "Prof. J", "size": 5731},
    {"name": "Prof. K", "size": 5731}
   ]
  },
  {"name": "", "size": 0},
  {
   "name": "E-Gov",
   "children": [
    {"name": "Prof. L", "size": 5731},
    {"name": "Prof. M", "size": 5731},
    {"name": "Prof. N", "size": 5731}
   ]
  },
  {
   "name": "Muki",
   "children": [
    {"name": "Prof. O", "size": 5731},
    {"name": "Prof. P", "size": 5731},
    {"name": "Prof. Q", "size": 5731},
    {"name": "Prof. V", "size": 5731}
   ]
  },
  {"name": "Schedule", "size": 5731},
  {"name": "News", "size": 5731},
  {"name": "Events", "size": 5731},
  {"name": "Search", "size": 5731},
  {"name": "", "size": 0}
 ]
},
{"name": "", "size": 0}
]
},

Если я нажму на Prof.A, я получу следующую HTML-страницу. Моя проблема в том, что я могу щелкнуть на Prof.A, даже если я не увеличил этот пузырь. Я просто хочу иметь возможность щелкнуть по нему, когда я увеличил его, и метка читается.

Я пытался «исправить» функции масштабирования, но ничего не работает.

зум.html:

<!DOCTYPE html>    
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<meta charset="utf-8">
<style>

.node {
cursor: pointer;
}

.node:hover {
stroke: #000;
stroke-width: 1.5px;
}

.node--leaf {
fill: #14DCD2;
}

.label {
 pointer-events: none;
 font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-anchor: middle;
 text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
 }

 .label,
 .node--root,
 .node--leaf {
 pointer-events: all;
 }
 .node--leaf:hover {
 fill: orangered;
 }

 </style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
 <script>


var margin = 600,
diameter = 1920;

var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);

var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; })

var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

d3.json("flare.json", function(error, root) {
if (error) return console.error(error);

var focus = root,
  nodes = pack.nodes(root),
  view;

var circle = svg.selectAll("circle")
  .data(nodes)
.enter().append("circle")
  .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
  .style("fill", function(d) { return d.children ? color(d.depth) : null; })
  .on("click", clickFct)

  function clickFct(d,i) {
  if (d3.select(this).classed("node--leaf")) {
    window.open(d.url,"_self"); //open URL here
  } else {
    if (focus !== d) 
    {
        zoom(d); 
        d3.event.stopPropagation();
    }
  }
  }

  var text = svg.selectAll("text")
  .data(nodes)
 .enter().append("text")
  .attr("class", "label")
  .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
  .style("display", function(d) { return d.parent === root ? null : "none"; })
  .text(function(d) { return d.name; })
  //.on('click', function(d, i) {window.location.href = d.url;});

  var node = svg.selectAll("circle,text")

  node.each(function(d){
  var thisNode = d3.select(this);
  if (!d.children) {
    thisNode.append("a")
        .attr("xlink:href", function(d) { return d.url; })
        .append("text")
            .attr("dx", 8)
            .attr("dy", 3)
            .attr("text-anchor", "start")
            .text(function(d) { return d.name; })
            ;
   } else {
    thisNode.append("text")
        .attr("dx", -8)
        .attr("dy", 3)
        .attr("text-anchor", "end")
        .text(function(d) { return d.name; });      
     }

    });




   d3.select("body")
  .style("background", color(-1))
  .on("dblclick", function() { zoom(root); });

   zoomTo([root.x, root.y, root.r * 2 + margin]);

   function zoom(d) {
   var focus0 = focus; focus = d;
   //.attr("xlink:href", url);
   //.on('click', function(d, i) {window.location.href = d.url;});

   var transition = d3.transition()
    .duration(d3.event.altKey ? 7500 : 750)
    .tween("zoom", function(d) {
      var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 4 + margin]);
      return function(t) { zoomTo(i(t)); };
    });

    transition.selectAll("text")
   .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
    .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
    .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
    .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });

    }

    function zoomTo(v) {
    var k = diameter / v[2]; view = v;
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", function(d) { return d.r * k; });

    }

     });

     d3.select(self.frameElement).style("height", diameter + "px");

    </script>
    </html>

Я не могу добиться никакого прогресса, кажется, ничего не работает, пожалуйста, помогите мне!


javascript svg d3.js hyperlink circle-pack
person Sebastian Kawa    schedule 14.01.2015    source источник
comment
у тебя случайно нет jsfiddle?   -  person Pinguin Dirk    schedule 26.01.2015
comment
@PinguinDirk да здесь jsfiddle.net/chroth/fkxcvtu9/3   -  person Sebastian Kawa    schedule 01.02.2015

Ответы (2)


arrow_upward
2
arrow_downward

Позвольте мне немного расширить ответ @Elijah:

Во-первых, я бы удалил следующий бит из css:

.node--root,
.node--leaf {
  pointer-events: all;
}

чтобы получить больше контроля над событиями указателя.

Затем мы добавляем дополнительный класс к узлам, чтобы нам было легче получить к ним доступ:

.attr("class", function(d) { return 'depth' + d.depth + ' ' + 
  (d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"); })

Соответственно у каждого узла есть какой-то дополнительный класс, например .depth4.

Теперь мы можем общаться с узлами напрямую и добавлять/удалять события-указатели по мере необходимости.

Для этого и удобства добавим новую функцию:

function adjustPointerEvents(depth) {
  d3.selectAll('.node').attr('pointer-events', 'none');
  d3.select('.node--root').attr('pointer-events', 'all');
  d3.selectAll('.depth' + (depth + 1)).attr('pointer-events', 'all');
}

(сначала удаляем все события, потом добавляем события в узел-корень обратно (чтобы можно было уменьшить масштаб), а потом добавляем события для 'следующего' уровня))

При инициализации мы вызываем это на уровне 2:

adjustPointerEvents(2);

Кстати: у вас там есть какой-то дополнительный слой («Связь и умвельт», а потом «Курсы»), тонкую настройку оставляю вам...

И мы должны убедиться, что мы вызываем это на click:

function clickFct(d,i) {
  adjustPointerEvents(d.depth);
  ...

И все готово.

Вот обновленный jsfiddle: Fiddle

Как упоминалось выше, все еще требуется некоторая тонкая настройка, но я надеюсь, что дал еще несколько советов.

person Pinguin Dirk    schedule 01.02.2015

arrow_upward
1
arrow_downward

Вы можете динамически изменять стиль событий указателя узла в зависимости от уровня масштабирования. Итак, в вашем .enter() при создании узла установите .style("pointer-events", "none"), а затем, когда этот узел увеличится, что-то вроде

d3.select("some css for identifying the node")
 .style("pointer-events", "auto")

В зависимости от того, как вы выполняете масштабирование, это необходимо будет отрегулировать (например, если щелчок по узлу сначала увеличивает его, а затем после этого щелчок по узлу открывает страницу, и в этом случае вам нужно будет изменить поведение .on("click").Если вы хотите избежать встроенных стилей (и вы должны), вы можете иметь базовый класс ваших узлов pointer-events: none класс clickable, который имеет pointer-events: auto, и вы можете использовать d3.classed("clickable", true) в своей функции масштабирования, чтобы сделать поведение щелчка доступным.

person Elijah    schedule 14.01.2015
comment
теперь это не работает, ничего не кликабельно, и я не могу увеличить масштаб, может быть, я сделал что-то не так - person Sebastian Kawa; 14.01.2015
comment
не могли бы вы привести пример, где все изменить? - person Sebastian Kawa; 16.01.2015