logo标签列表

d3无法创建Bootstrap卡片。

d3.js
3

我希望d3在card-columns中创建卡片，但我的代码在刷新时只创建了一个卡片。我的错误在哪里？

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>`
        });
1个回答
3
您正在将 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接