javascript - D3 : data update "enter" selection is empty

Question

我正在尝试使用 D3 中的数据、更新、输入模式来更新一些数据。我一直在关注这个例子:https://bl.ocks.org/mbostock/3808218

我有两组数据，一组有额外的值(value):

const data = [
  {
    weekId: "w-1",
    start: 100
  },
  {
    weekId: "w-2",
    start: 200
  }
];

const updatedData = [
  {
    weekId: "w-1",
    start: 100
  },
  {
    weekId: "w-2",
    start: 200
  },
  {
    weekId: "w-3",
    start: 300
  }
];

创建一组绿色 block 的一些代码

// Create initial data
this.visualisation
  .selectAll()
  .data(data, d => d.weekId)
  .enter()
  .append("rect")
  .attr("class", "spline-group")
  .attr("x", w => w.start)
  .attr("y", 20)
  .attr("width", 22)
  .attr("height", 22)
  .attr("fill", "green");

然后我进行选择并调用 data:

// https://bl.ocks.org/mbostock/3808218
// DATA JOIN
// Join new data with old elements, if any.
const dataGroups = d3
  .selectAll("rect.spline-group")
  .data(updatedData, d => d.weekId);

我将绿色 block 更新为蓝色(工作正常!):

// UPDATE
// Update old elements as needed.
dataGroups.attr("fill", "blue");

这是我遇到问题的地方，我输入新数据以尝试附加新的矩形(这次是白色的，所以我可以看到它是新的):

// ENTER
// Create new elements as needed.
const newItems = dataGroups
  .enter()
  .append("rect")
  .attr("class", "spline-group")
  .attr("x", w => w.start)
  .attr("y", 30)
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "white");

newItems 选择总是空的，无论我怎么尝试。出了什么问题？

工作示例:

const data = [
  {
    weekId: "w-1",
    start: 100
  },
  {
    weekId: "w-2",
    start: 200
  }
];

const updatedData = [
  {
    weekId: "w-1",
    start: 100
  },
  {
    weekId: "w-2",
    start: 200
  },
  {
    weekId: "w-3",
    start: 300
  }
];

// Create initial data
d3.select("svg")
  .selectAll()
  .data(data, d => d.weekId)
  .enter()
  .append("rect")
  .attr("class", "spline-group")
  .attr("x", w => w.start)
  .attr("y", 20)
  .attr("width", 22)
  .attr("height", 22)
  .attr("fill", "green");

// https://bl.ocks.org/mbostock/3808218
// DATA JOIN
// Join new data with old elements, if any.
const dataGroups = d3
  .selectAll("rect.spline-group")
  .data(updatedData, d => d.weekId);

// UPDATE
// Update old elements as needed.
dataGroups.attr("fill", "blue");

// ENTER
// Create new elements as needed.
const newItems = dataGroups
  .enter()
  .append("rect")
  .attr("class", "spline-group")
  .attr("x", w => w.start)
  .attr("y", 30)
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "white");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
</svg>

Answer 1

您正在输入新的矩形，您可以在输入选择中记录 .size() 并看到添加了一个元素:

const data = [
  {
    weekId: "w-1",
    start: 100
  },
  {
    weekId: "w-2",
    start: 200
  }
];

const updatedData = [
  {
    weekId: "w-1",
    start: 100
  },
  {
    weekId: "w-2",
    start: 200
  },
  {
    weekId: "w-3",
    start: 300
  }
];

// Create initial data
d3.select("svg")
  .selectAll()
  .data(data, d => d.weekId)
  .enter()
  .append("rect")
  .attr("class", "spline-group")
  .attr("x", w => w.start)
  .attr("y", 20)
  .attr("width", 22)
  .attr("height", 22)
  .attr("fill", "green");

// https://bl.ocks.org/mbostock/3808218
// DATA JOIN
// Join new data with old elements, if any.
const dataGroups = d3
  .selectAll("rect.spline-group")
  .data(updatedData, d => d.weekId);

// UPDATE
// Update old elements as needed.
dataGroups.attr("fill", "blue");

// ENTER
// Create new elements as needed.
const newItems = dataGroups
  .enter()
  .append("rect")
  .attr("class", "spline-group")
  .attr("x", w => w.start)
  .attr("y", 30)
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "white");
  
console.log("new items: " + newItems.size());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
</svg>

因此，如果您要输入新元素，您要将它附加到哪里？让我们看看你的矩形在哪里:

您没有指定矩形的位置。输入您使用的第一个矩形时:

d3.select("svg").selectAll("rect")

并且您输入的元素被创建为 svg 的子元素，在第二个输入周期中，您只需使用 d3.selectAll("rect")。您没有指定要输入附加元素的位置，因此它被附加到文档中。

为确保在正确的位置输入新元素，只需先选择父容器，就像输入前两个元素时所做的那样:

const dataGroups = d3.select("svg") // select SVG
    .selectAll("rect.spline-group") // then select all rects.
    .data(updatedData, d => d.weekId);

dataGroups.attr("fill", "blue");

const newItems = dataGroups
   .enter()
   .append("rect")

const data = [
  {
    weekId: "w-1",
    start: 100
  },
  {
    weekId: "w-2",
    start: 200
  }
];

const updatedData = [
  {
    weekId: "w-1",
    start: 100
  },
  {
    weekId: "w-2",
    start: 200
  },
  {
    weekId: "w-3",
    start: 300
  }
];

// Create initial data
d3.select("svg")
  .selectAll()
  .data(data, d => d.weekId)
  .enter()
  .append("rect")
  .attr("class", "spline-group")
  .attr("x", w => w.start)
  .attr("y", 20)
  .attr("width", 22)
  .attr("height", 22)
  .attr("fill", "green");

// https://bl.ocks.org/mbostock/3808218
// DATA JOIN
// Join new data with old elements, if any.
const dataGroups = d3.select("svg")
  .selectAll("rect.spline-group")
  .data(updatedData, d => d.weekId);

// UPDATE
// Update old elements as needed.
dataGroups.attr("fill", "blue");

// ENTER
// Create new elements as needed.
const newItems = dataGroups
  .enter()
  .append("rect")
  .attr("class", "spline-group")
  .attr("x", w => w.start)
  .attr("y", 30)
  .attr("width", 20)
  .attr("height", 20)
  .attr("fill", "crimson");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500">
</svg>