предотвратить перекрытие этикеток d3 circle pack

Застрял на перекрывающихся этикетках. Для иллюстрации: JSFIDDLE

  1. Щелкните текстовую метку «Группа A». После изменения масштаба метка группы A остается, вызывая перекрытие с меткой маленького кружка.
  2. Щелкните в другом месте, чтобы уменьшить масштаб.
  3. Снова нажмите «Группа А». На этот раз метка не остается, поэтому перекрытия нет. Так что, кажется, через какое-то время это само собой исправляется.

Я не хочу перекрытия при первом нажатии на что-то. Как мне это сделать? Я не хочу обрезать метки или менять их положение.

Я возился с этим битом, но пока безуспешно.

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"; });

К вашему сведению, это также происходит, если первый щелчок по среднему кругу.

Этот пост приближается , говоря, что можно ограничить видимость с помощью вывода пакета, но не говорит, как этого добиться.

В основном я пытаюсь сделать что-то вроде этого: «Если увеличено до уровня среднего или малого круга, не показывать метку среднего круга».

Спасибо.


javascript d3.js label zooming circle-pack
person airwwwave    schedule 14.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я с той же проблемой. Я выяснил, что конкретная часть функции масштабирования, применяемая к корню сразу после создания исходного представления, устраняет эту проблему. Добавление этого кода в конец файла d3.json должно помочь. Все еще ищем лучшее решение.

init(root)
function init(d) {
  var transition = d3.transition()
  transition.selectAll("text")
    .each("start", function(d) {
      if (d.parent === focus) this.style.display = "inline";
    });
}
person Josh    schedule 15.05.2015
comment
Бум! Спасибо. Это имеет смысл, что вам нужно будет внести исправление сразу после первоначального просмотра, и вы это поняли. Огромное спасибо! JSFIDDLE ANSWER (хотя это не работает в области результатов jsfiddle, вы должны запустить его. - person airwwwave; 15.05.2015