d3. js - Понимание enter () - PullRequest
Новая
       12

d3. js - Понимание enter ()

0 голосов
/ 06 января 2020

Я пробую следующий пример: 

<html>
    <head>
        <script src="//unpkg.com/d3"></script>
    </head>
    <body>
       <div class = "cities">
       </div>

    </body>
    <script>
        cities = ['san francisco', 'new york', 'seattle']

        d3.select("div.cities")
        .data(cities)
        .enter()
        .append("div")
        .html(d=>d)

    </script>
</html>

Я ожидал, что это добавит по одному элементу div, соответствующему каждому городу, добавленному в элементе div "towns". Но когда я запускаю это, я получаю следующее:

enter image description here

Вопросы:

  1. Почему новые элементы div получают добавили вне "города" div? Как мне добавить их в div "city"?
  2. Разве не должно быть 3 элементов div? Почему отсутствует элемент div для "Сан-Франциско"?

Ответы [ 2 ]

1 голос
/ 06 января 2020

Я обнаружил, что более новый selection.join () немного легче понять, когда дело доходит до шаблона ввода / обновления / выхода при использовании D3. 

<html>
        <head>
            <script src="//unpkg.com/d3"></script>
        </head>
        <body>
           <div class = "cities">
           </div>
        </body>
        <script>
            cities = ['san francisco', 'new york', 'seattle']
    
            d3.select("div.cities")
             .selectAll('div')
            .data(cities)
            .join( /* Add new data */
                   enter => enter.append("div").text( d=> d ),
                   /* Update existing data */
                   update => update.text( d => d ),
                   /* Remove data that no longer exists */
                   exit => exit.remove() )
    
        </script>
</html>
0 голосов
/ 06 января 2020

Вам нужно добавить selectAll() перед .data(), что вызов функции selectAll () привязывает ваши элементы данных к элементу DOM после вызова enter, в статье это подробно объясняется:

https://www.d3indepth.com/enterexit/

<html>
        <head>
            <script src="//unpkg.com/d3"></script>
        </head>
        <body>
           <div class = "cities">
           </div>
    
        </body>
        <script>
            cities = ['san francisco', 'new york', 'seattle']
    
            d3.select("div.cities")
             .selectAll('div')
            .data(cities)
            .enter()
            .append("div")
            .html(d=>d)
    
        </script>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...