Wyjście nie działa poprawnie

Question

Witam Jestem całkiem nowy dla D3 i mam problemy z funkcją wyjścia

Chcę zrobić listę i paski bez użycia SVG i wszystko działa jak urok.

Wybieram element div, a następnie dołączam i wprowadzam moje dane w celu wypełnienia zmiennych div.

var content = d3.select("#graph").selectAll("div") 
     .data(bandMates) 
     .enter() 
     .append("div") 
     .classed("member",true) //Div contenedor 

     content 
      .append("div") 
      .text(function(d) { return d.name; }); 

     content 
      .append("div") 
      .style("height", "40px") 
      .style("width", "0px") 
      .style("background-color", "#ff9999") 
      .transition() 
      .duration(1000) 
      .style("width", function (d){ return d.songs + "px";}); 

     content 
      .append("div") 
      .text(function(d) { return "wrote " + d.songs + " songs!"; }); 

na końcu procesu I zawiera funkcję content.exit().remove(); ponieważ chcę, aby móc zaktualizować liczbę utworów z innej funkcji, a następnie ponownie wywołując funkcję de draw().

konsoli Firebug rzuca mi ten błąd

content.exit is not a function 

Am I czegoś brakuje? Poszedłem do samouczków Bostocka i wszystko wydaje się być w porządku.

Zrobiłem JSFiddle sprawdzić mój kod:

http://jsfiddle.net/9HTUM/

Dzięki za czytanie!

Answer 1

Oto zaktualizowana skrzypce z trzech zmian: http://jsfiddle.net/URpfB/

1) początkowy selektor selectAll musi być bardziej konkretny, gdyż istnieje wiele potomek DIV na stronie po kod wykonywany raz. Musisz rozróżnić najwyższe elementy div i inne, wykonując jedną z następujących funkcji: 2) potrzebujesz funkcji klucza danych, aby d3 miał więcej możliwości niż długość/pozycja danych w celu określenia, kiedy nowe dane zostaną dodane lub stare dane są usuwane. W twoim przykładzie zachowałoby to każdy element div.member powiązany z pojedynczą nazwą elementu: data(bandMates, function(d){return d.name;})

3), jak zauważył Drzemka, musisz być bardziej precyzyjny przy przypisywaniu wyborów do zmiennych. Nie można wyjść() z menu wyboru().

Answer 2

pan zdefiniowane jako treść:

var content = d3.select("#graph").selectAll("div") 
    .data(bandMates) 
    .enter() 
    .append("div") 
    .classed("member",true) //Div contenedor 

Więc kiedy zrobić content.exit(), to jak próbuje zrobić d3.select("#graph").selectAll("div").data(bandMates).enter()..exit()

Dzwonisz zjazd na selekcji zostały już wprowadzone. Jeśli zamiast definiować zawartość jako:

var content = d3.select("#graph").selectAll("div") 
    .data(bandMates); 

a następnie zrobić content.enter().... w 3 linii kodu masz udostępnionego w swojej odpowiedzi, ten błąd powinien odejść.

Enter() i exit() są funkcjami wyboru danych, więc kiedy już nazywany enter() nie można później wywołać exit() i mają być znaczące. exit() musi być na tych samych danych.

Answer 3

Przyczyna tylko drzewa ...

Nie jest to związane z problemem PO, ale znalazłem to pytanie podczas badania, więc dodałem je do następnego przechodnia.

W moim przypadku oczyszczenie d3.layout.tree przy zwinięciu/rozwinięciu nie miało miejsca, ponieważ zapomniałem ustawić klasę "węzłów" na węzłach. Wydaje się, że drzewa d3 wymagają ustawienia atrybutu klasy węzłów.

nie działa

<g transform="translate(20,20)"> 
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle> 
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text> 
</g> 

pracował

<g transform="translate(20,20)" class="node "> 
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle> 
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text> 
</g>