d3. js: получить значение td

Question

Я новичок в d3. js Проблема, с которой я сталкиваюсь, заключается в том, что я не уверен, как получить значение td.

html

<table class="table">
<thead><tr>
    <th>S No</th>
    <th>Name</th>
    <th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
    <td>2</td>
    <td>Arun</td>
    <td>Positive</td>
</tr>
<tr>
    <td>3</td>
    <td>Mickey</td>
    <td>Negetive</td>
</tr>
<tr>
    <td>4</td>
    <td>Zack</td>
    <td>Positive</td>
</tr>
</tbody>

Я прочитал документацию по d3. js, но не смог найти документацию о том, как я могу извлечь данные из таблицы. Скажем, я хотел бы добавить div с цветом фона (зеленый) в кредит, который имеет значение negetive, как мы можем достичь этого

Это то, что я пытался

let selection = d3.selectAll("tr")
console.log("Get Table " + selection)

let headerElement = selection.nodes()[0];
let output = selection.selectAll("td")

я попытался распечатать значение выбранного столбца с помощью console.log (вывод ["0"] [1]), но я получаю сообщение об ошибке.

Заранее спасибо

Answer 1

Поскольку выборки D3 v4 являются объектами, а не массивами, поэтому вы не можете обращаться с ними, как с output["0"][1].

Идиоматический c путь к l oop выбор использует selection.each. Например:

const tds = d3.selectAll("td")
  .each(function() {
    console.log(d3.select(this).text());
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>S No</th>
      <th>Name</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>Arun</td>
      <td>Positive</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mickey</td>
      <td>Negetive</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Zack</td>
      <td>Positive</td>
    </tr>
  </tbody>

Если вам не нужен другой выбор, d3.select(this).text() - это то же самое, что и this.innerHTML.

Поэтому вы можете использовать тот же each, чтобы установить "цвет фона (зеленый) в кредит, который имеет значение negetive" , как вы сказали:

const tds = d3.selectAll("td")
  .each(function() {
    d3.select(this).style("background-color", this.innerHTML === "Positive" ? "green" : null)
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>S No</th>
      <th>Name</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>Arun</td>
      <td>Positive</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mickey</td>
      <td>Negetive</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Zack</td>
      <td>Positive</td>
    </tr>
  </tbody>