d3.js - d3 无法创建引导卡

Question

我希望 d3 在卡片列中创建卡片，但我的代码在刷新时只创建一张卡片。我的错误是什么？

var group = d3.select('.card-columns').append("div").attr("class", "card")
    var card = group.selectAll('.card')
    group.data(data).enter()
        .merge(card)
        .html(function (d) {
            return
            `<div class="card-body">
                <h5 class="card-title">${d.project}</div>
                    <p class="card-text">${d.description}</div>
                        <p class="card-text"><small class="text-muted">${d.status}</small></p>
</div>`
        });

Answer 1

您将 div 附加到 div 而不是附加到选择中，请看我的示例:

let rnd = a => Math.random().toString(36).substring(2);

var data = [1,2,3,4].map(d => ({
  project: rnd(),
  description: rnd(),
  status: rnd()
}));

d3.select('.card-columns')
    .selectAll('.card')
    .data(data)
    .enter()
    .append("div") // append div here
    .classed("card", true)
    .each(function(d) { // i dont know why, but html function does not helps, i used each over all nodes here
      d3.select(this).html(
        `<div class="card-body">
           <h5 class="card-title">${d.project}</div>
           <p class="card-text">${d.description}</div>
           <p class="card-text"><small class="text-muted">${d.status}</small></p>
        </div>`)
    });

.card {
  border: 1px solid;
  display: inline-block;
  margin: 5px;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="card-columns"></div>