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元素是在第一次调用draw函数但不是span元素

的情况下创建的

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

为什么第一次没有正确创建？

https://jsfiddle.net/h2ujjo98/

Answer 1

您正在处理nested selection。首先，您不需要将数据重新绑定到嵌套元素，它会自动传递。其次，您无法正确处理输入，更新和退出选择。重新考虑它会是这样的：

// 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。

d3.js数据第一次没有约束

1 个答案: