D3：數據更新“輸入”選擇為空

Question

我正在嘗試使用數據，更新，在D3中輸入模式來更新一些數據。 我一直在關注這個示例： https : //bl.ocks.org/mbostock/3808218

我有兩組數據，其中一組具有額外的價值：

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
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);

我將綠色塊更新為藍色（很好！）：

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

這是我遇到的問題，我輸入新數據以嘗試附加新的rect（這次是白色，所以我可以看到它是新的）：

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