javascript - d3.js 数据第一次未绑定(bind)

Question

我有这样的数据:

[{
    label: "ABC", p1: "23", p2: "3"
},
{
    label: "EF", p1: "4", p2: "10"
},
{
    label: "GV", p1: "5", p2: "15"
},
{
    label: "FD", p1: "9", p2: "5"
},
{
    label: "SDF", p1: "20", p2: "10"
},]

我尝试用以下方法绘制数据:

var keys = ["p1", "p2"];

function draw(data) {
    var p = d3.select("body")
      .selectAll(".one")
      .data(d3.stack().keys(keys)(data))

    p.enter()
      .append("p")
      .attr("class", "one")

    var span = p
      .selectAll("span")
      .data(function(d) { return d})

    span
      .enter()
      .append("span")
      .html(function(d) { return d})

    span.exit().remove();
}

p 元素是在第一次调用绘制函数时创建的，但不是 span 元素

我想为数据数组中的每个对象都有一个 span 元素

为什么第一次创建不正确？

https://jsfiddle.net/h2ujjo98/

Answer 1

您正在处理nested selection 。首先，您不需要将数据重新绑定(bind)到嵌套元素，它会自动传递。其次，您没有正确处理输入、更新和退出选择。重构它看起来像这样:

// update selection
var p = d3.select("body")
  .selectAll(".lol")
  .data(d3.stack().keys(keys)(data));

// those being removed
p.exit().remove();

// those entering
var pEnter = p.enter()
  .append("p")
  .attr("class", "lol");

// append a span to those entering
pEnter.append("span");

// this is update + enter
p = pEnter.merge(p);

// update the update + enter selection's sub-selection
p.select("span").html(function(d) { return d });        

已更新fiddle .