d3 Добавление ячеек в существующую таблицу

Question

У меня возникли проблемы с тем, чтобы это работало. У меня есть существующая таблица HTML и хотелось бы использовать d3 для добавления некоторых данных в таблицу.

Вот HTML таблица:

<table> 
    <thead> 
    <tr id="table_header"> 
     <th>Header 1</th> 
     <th>Header 2</th> 
     <th>Header 3</th> 
     <th>Header 4</th> 
     <th>Header 5</th> 
     <th>Header 6</th> 
    </tr> 
    </thead> 
    <tbody id="data_table"> 
    </tbody> 
    </table> 

Сейчас я просто хочу, чтобы добавить некоторые дополнительные заголовки к этому, поэтому я использую d3

<script> 
    d3.json("data.php", function(monthly_growth) { 

    d3.select("#table_header").selectAll("th").data(monthly_growth).enter().append("th").text(function(d) {return d.MONTH;}); 

    }); 
</script> 

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

Я также попытался дать моему 6-му заголовку идентификатор и добавить к нему, но он не совсем хорошо работает. Казалось, что он начал новый ряд заголовков под ним. Кроме того, я чувствую, что это не правильный способ сделать это.

Answer 1

ли это путем создания нового класса, так что d3 добавляет новые типы вместо «думать» Я хочу, чтобы выбрать там уже .:

<script> 
    d3.json("data.php", function(monthly_growth) { 

    d3.select("#table_header").selectAll("th.month").data(monthly_growth).enter().append("th").attr('class', 'month').text(function(d) {return d.MONTH;}); 

    }); 
</script>