Zoomable treemap w D3 v4

Question

Próbuję dodać zachowanie powiększania do mojej treemap w D3 v4 na podstawie poniższych przykładów: 1 i 2. Jest zbudowany z elementów HTML, a nie z SVG. Uczyniliśmy go responsywnym, używając jednostek procentowych zamiast pikseli.

Działa to świetnie, ale teraz chciałbym powiększyć pojedyncze komórki za pomocą jednego kliknięcia, aż do ostatniego dziecka. Wtedy kliknięcie powróciłoby do korzenia drzewa.

Oto mój kod do tej pory: http://codepen.io/znak/pen/qapRkQ

jestem zmaga się z funkcją zoom, który działa w V4 i to wszędzie:

function zoom(d) { 

    console.log('clicked: ' + d.data.name); 

    x.domain([d.x0, d.x1]); 
    y.domain([d.y0, d.y1]); 

    var t = d3.transition() 
     .duration(800) 
     .ease(d3.easeCubicOut); 

    chart 
     .merge(cell) 
     .transition(t) 
     .style("left", function(d) { return x(d.x0) + "%"; }) 
     .style("top", function(d) { return y(d.y0) + "%"; }) 
     .style("width", function(d) { return x(d.x1 - d.x0) + "%"; }) 
     .style("height", function(d) { return y(d.y1 - d.y0) + "%"; });}); 

    node = d; //? 
    d3.event.stopPropagation(); //? 
} 

Jak zaktualizować i elementy przejściowe z D3 v4?

Dzięki za wszelkie wskazówki!

Answer 1

Twoim problemem nie jest funkcja powiększania, ale elementy poziomu 1 znajdują się przed elementami poziomu 2, więc po jej kliknięciu próbujesz powiększyć ten sam element poziomu-1.

Myślę, że najłatwiejszym rozwiązaniem byłoby przypisanie klasy z elementem stylu level-1 lub jego styl z pointer-events: none podczas jego powiększania. To uniemożliwia kliknięcie, a zatem gdy użytkownik kliknie, przechodzi do dziecka, które następnie aktywuje zoom.

Pamiętaj, aby usunąć klasę lub styl po zresetowaniu drzewa!

jest obsługiwana we wszystkich głównych przeglądarkach (Chrome, FF, IE11 +) oprócz Opery Mini. See browser compatibility on caniuse.com. Jeśli potrzebujesz obsługi IE mniejszej niż 11 lub Opery Mini, możesz manipulować z-index lub ukryć rodzica.

Zasadniczo rodzic blokuje wybór dzieci, więc jeśli zdecydujesz, że powinieneś być dobry!