Javascript 更新时从散点图中删除旧圆

我有一个用d3.js构建的散点图。它在图表中画出特定人群消费习惯的圆圈

我有一个选择菜单，可以更改特定用户并更新散点图上的圆圈

问题是旧的圆圈在更新时不会被删除

我应该在哪里使用

.remove（）.update（）

，请参阅此示例了解工作示例

---

首先，Alan，我建议您遵守一些编码风格惯例，以使代码可读。我知道D3示例和库代码本身几乎不会提高代码的可读性，但这首先符合您的兴趣，因为维护可读代码要容易得多

第二，当您更改数据时，您需要了解D3如何使用enter、update和exit集合。迈克·博斯托克的可能是一个好的开始。除非您了解联接是如何工作的，否则将无法编写动态D3图表

第三，这里有一个

updateScatter

中的bug

name.length

没有意义，因为您的名字变量是

value

。因此，首先并不是删除旧数据

// Update circles for the selected user chosen in the select menu.
svg.selectAll(".markers")
    .data(data.filter(function(d){ return d.FirstName.substring(0, name.length) === value;}))
    .transition().duration(1000)
    .attr("cx", function(d) { return xScale(d.timestamp); })
    .attr("cy", function(d) { return yScale(d.price); });

另外，奇怪的相等比较是

d.FirstName.substring（0，name.length）==name

。您的名字数据在CSV文件中的间距不均匀。普通的

d.FirstName==name

就足够了。如果仍然需要尾随空格，只需在强制执行价格和日期的位置修剪字符串

这就是正确的

updateScatter

外观：

function updateScatter() 
{
  var selectedFirstName = this.value;
  var selectedData      = data.filter(function(d) 
  {
    return d.FirstName == selectedFirstName;
  });

  yScale.domain([
    0, 
    d3.max(selectedData.map(function(d) 
    {
      return d.price;
    }))
  ]);

  svg.select(".y.axis")
    .transition().duration(750)
    .call(yAxis);

  // create *update* set
  var markers = svg.selectAll(".markers").data(selectedData);

  // create new circles, *enter* set
  markers.enter()
    .append('circle')
    .attr("class", 'markers')
    .attr("cx", function(d) 
    {
      return xScale(d.timestamp);
    })
    .attr("cy", function(d) 
    {
      return yScale(d.price);
    })
    .attr('r', 5)
    .style('fill', function(d) 
    {
      return colour(cValue(d));
    });

  // transition *update* set
  markers.transition().duration(1000)
    .attr("cx", function(d) 
    {
      return xScale(d.timestamp);
    })
    .attr("cy", function(d) 
    {
      return yScale(d.price);
    });

  // remove *exit* set
  markers.exit().remove();
}

---

首先，Alan，我建议您遵守一些编码风格惯例，以使代码可读。我知道D3示例和库代码本身几乎不会提高代码的可读性，但这首先符合您的兴趣，因为维护可读代码要容易得多

第二，当您更改数据时，您需要了解D3如何使用enter、update和exit集合。迈克·博斯托克的可能是一个好的开始。除非您了解联接是如何工作的，否则将无法编写动态D3图表

第三，这里有一个

updateScatter

中的bug

name.length

没有意义，因为您的名字变量是

value

。因此，首先并不是删除旧数据

// Update circles for the selected user chosen in the select menu.
svg.selectAll(".markers")
    .data(data.filter(function(d){ return d.FirstName.substring(0, name.length) === value;}))
    .transition().duration(1000)
    .attr("cx", function(d) { return xScale(d.timestamp); })
    .attr("cy", function(d) { return yScale(d.price); });

另外，奇怪的相等比较是

d.FirstName.substring（0，name.length）==name

。您的名字数据在CSV文件中的间距不均匀。普通的

d.FirstName==name

就足够了。如果仍然需要尾随空格，只需在强制执行价格和日期的位置修剪字符串

这就是正确的

updateScatter

外观：

function updateScatter() 
{
  var selectedFirstName = this.value;
  var selectedData      = data.filter(function(d) 
  {
    return d.FirstName == selectedFirstName;
  });

  yScale.domain([
    0, 
    d3.max(selectedData.map(function(d) 
    {
      return d.price;
    }))
  ]);

  svg.select(".y.axis")
    .transition().duration(750)
    .call(yAxis);

  // create *update* set
  var markers = svg.selectAll(".markers").data(selectedData);

  // create new circles, *enter* set
  markers.enter()
    .append('circle')
    .attr("class", 'markers')
    .attr("cx", function(d) 
    {
      return xScale(d.timestamp);
    })
    .attr("cy", function(d) 
    {
      return yScale(d.price);
    })
    .attr('r', 5)
    .style('fill', function(d) 
    {
      return colour(cValue(d));
    });

  // transition *update* set
  markers.transition().duration(1000)
    .attr("cx", function(d) 
    {
      return xScale(d.timestamp);
    })
    .attr("cy", function(d) 
    {
      return yScale(d.price);
    });

  // remove *exit* set
  markers.exit().remove();
}

---

首先，Alan，我建议您遵守一些编码风格惯例，以使代码可读。我知道D3示例和库代码本身几乎不会提高代码的可读性，但这首先符合您的兴趣，因为维护可读代码要容易得多

第二，当您更改数据时，您需要了解D3如何使用enter、update和exit集合。迈克·博斯托克的可能是一个好的开始。除非您了解联接是如何工作的，否则将无法编写动态D3图表

第三，这里有一个

updateScatter

中的bug

name.length

没有意义，因为您的名字变量是

value

。因此，首先并不是删除旧数据

// Update circles for the selected user chosen in the select menu.
svg.selectAll(".markers")
    .data(data.filter(function(d){ return d.FirstName.substring(0, name.length) === value;}))
    .transition().duration(1000)
    .attr("cx", function(d) { return xScale(d.timestamp); })
    .attr("cy", function(d) { return yScale(d.price); });

另外，奇怪的相等比较是

d.FirstName.substring（0，name.length）==name

。您的名字数据在CSV文件中的间距不均匀。普通的

d.FirstName==name

就足够了。如果仍然需要尾随空格，只需在强制执行价格和日期的位置修剪字符串

这就是正确的

updateScatter

外观：

function updateScatter() 
{
  var selectedFirstName = this.value;
  var selectedData      = data.filter(function(d) 
  {
    return d.FirstName == selectedFirstName;
  });

  yScale.domain([
    0, 
    d3.max(selectedData.map(function(d) 
    {
      return d.price;
    }))
  ]);

  svg.select(".y.axis")
    .transition().duration(750)
    .call(yAxis);

  // create *update* set
  var markers = svg.selectAll(".markers").data(selectedData);

  // create new circles, *enter* set
  markers.enter()
    .append('circle')
    .attr("class", 'markers')
    .attr("cx", function(d) 
    {
      return xScale(d.timestamp);
    })
    .attr("cy", function(d) 
    {
      return yScale(d.price);
    })
    .attr('r', 5)
    .style('fill', function(d) 
    {
      return colour(cValue(d));
    });

  // transition *update* set
  markers.transition().duration(1000)
    .attr("cx", function(d) 
    {
      return xScale(d.timestamp);
    })
    .attr("cy", function(d) 
    {
      return yScale(d.price);
    });

  // remove *exit* set
  markers.exit().remove();
}

---

首先，Alan，我建议您遵守一些编码风格惯例，以使代码可读。我知道D3示例和库代码本身几乎不会提高代码的可读性，但这首先符合您的兴趣，因为维护可读代码要容易得多

第二，当您更改数据时，您需要了解D3如何使用enter、update和exit集合。迈克·博斯托克的可能是一个好的开始。除非您了解联接是如何工作的，否则将无法编写动态D3图表

第三，这里有一个

updateScatter

中的bug

name.length

没有意义，因为您的名字变量是

value

。因此，首先并不是删除旧数据

// Update circles for the selected user chosen in the select menu.
svg.selectAll(".markers")
    .data(data.filter(function(d){ return d.FirstName.substring(0, name.length) === value;}))
    .transition().duration(1000)
    .attr("cx", function(d) { return xScale(d.timestamp); })
    .attr("cy", function(d) { return yScale(d.price); });

另外，奇怪的相等比较是

d.FirstName.substring（0，name.length）==name

。您的名字数据在CSV文件中的间距不均匀。普通的

d.FirstName==name

就足够了。如果仍然需要尾随空格，只需在强制执行价格和日期的位置修剪字符串

这就是正确的

updateScatter

外观：

function updateScatter() 
{
  var selectedFirstName = this.value;
  var selectedData      = data.filter(function(d) 
  {
    return d.FirstName == selectedFirstName;
  });

  yScale.domain([
    0, 
    d3.max(selectedData.map(function(d) 
    {
      return d.price;
    }))
  ]);

  svg.select(".y.axis")
    .transition().duration(750)
    .call(yAxis);

  // create *update* set
  var markers = svg.selectAll(".markers").data(selectedData);

  // create new circles, *enter* set
  markers.enter()
    .append('circle')
    .attr("class", 'markers')
    .attr("cx", function(d) 
    {
      return xScale(d.timestamp);
    })
    .attr("cy", function(d) 
    {
      return yScale(d.price);
    })
    .attr('r', 5)
    .style('fill', function(d) 
    {
      return colour(cValue(d));
    });

  // transition *update* set
  markers.transition().duration(1000)
    .attr("cx", function(d) 
    {
      return xScale(d.timestamp);
    })
    .attr("cy", function(d) 
    {
      return yScale(d.price);
    });

  // remove *exit* set
  markers.exit().remove();
}

---

谢谢，萨吉。我们能不能把这个带到聊天室，这样就不会因为我有几个问题而在回答部分显得臃肿？我想我没有足够的声望点来打开聊天室。不过，如果有相关评论，其他人也可能从中受益。所以我觉得没关系，不用担心，Saaj。再次感谢您的帮助和建议。我想问一些关于updateCatter（）函数中的错误的问题；以及它是如何做到的。基本上，当您不向

data（）

提供第二个参数时，差异项仅根据索引计算。当您将

['a'，'b'，'c'，'d']

转换为

['x'，'y']

时，删除集就是

['c'，'d']

。谢谢，Saaj。我们能不能把这个带到聊天室，这样就不会因为我有几个问题而在回答部分显得臃肿？我想我没有足够的声望点来打开聊天室。但是，如果有相关评论，其他人