Блог

Главная - Вопросы по программированию - D3.js .добавить( ) к существующему и иерархии

D3.js .добавить( ) к существующему и иерархии

#d3.js #append

#d3.js #добавить

Вопрос:

Согласно моему коду, похоже, что подразделения key_square и key_line должны быть элементами-братьями для key_row, поскольку я добавляю их в раздел «ключ», но они являются потомками key_row .

Может кто-нибудь мне это объяснить?

Спасибо,

 <body>

    <div id="timeseries"> 
    </div>

    <div id="key"> 
    </div>

    <script>
       var key = d3.select("#key")
           .selectAll("div")
           .data(data)
           .enter()
           .append("div")
               .attr("class","key_row")
               .attr("id",function (d){ return d.line_id;})

//add square
            key.append("div")
               .attr("class", "key_square")
           .style("background-color","#C8DAF8")

//d3.select("#key")
        key.append("div")
            .attr("class","key_id")
            .attr("id","key_line")
            .style("background-color","#E9F0FC")
            .text(function (d) { return d.line_id;});

Ответ №1:

Давайте обсудим код один за другим, сначала один

 var key = d3.select("#key")
           .selectAll("div")
           .data(data)
           .enter()
           .append("div")
               .attr("class","key_row")
               .attr("id",function (d){ return d.line_id;})

В приведенном выше коде мы выбрали div, используя id, добавив divs, здесь количество divs создается в соответствии с длиной данных, а затем мы указываем класс и идентификаторы для этих divs, после выполнения этого кода d3 вернет массив, содержащий эти divs, так что теперь переменный ключ содержит эти вновь созданные div. Если вы хотите это увидеть, напишите один console.log(ключ) stmt после приведенного выше кода.

второй

 key.append("div")
               .attr("class", "key_square")
           .style("background-color","#C8DAF8")

Здесь мы добавляем divs к ключу, это означает, что эта функция добавления вызывается для одного div, который удерживается ключом, поэтому после выполнения этого кода divs создаются внутри как потомок выше созданных divs.

третий

 key.append("div")
            .attr("class","key_id")
            .attr("id","key_line")
            .style("background-color","#E9F0FC")
            .text(function (d) { return d.line_id;});

Здесь также то же самое, что мы снова вызываем функцию append для изначально созданных divs, так что то же самое произойдет и здесь. divs добавляются как потомок к первоначально созданным divs.

Так вот как это работает. Это все, что я могу сказать. Если где-либо допущена ошибка, укажите на нее. Спасибо

Комментарии:

1. Большое спасибо за подробный ответ. Основываясь на вашем объяснении, я вижу, где я неправильно понял. Переменный ключ содержит массив элементов <div>, классом которых является «key_row» ..А не <div>, идентификатор которого равен #key ….