стоп d3 этикетки круглых упаковок от перекрытия

Question

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

1. Нажмите на текстовую метку «Группа А». После трансфокатора наклейка Group 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"; }); 

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

This post gets close, заявив, что он позволяет ограничить видимость с использованием выходного пакета, но не говорит, как его достичь.

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

Спасибо.

Answer 1

У меня такая же проблема. Я выяснил, что конкретная часть функции масштабирования, если она применяется к корню сразу после создания внутреннего представления, устраняет эту проблему. Добавление этого кода в конец вашего файла 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"; 
    }); 
}