D3.js中plot函数二次调用时部分append操作失效求助

嘿，我找到你这个问题的症结了！第二次调用plot函数时部分渲染失效，核心原因是你在函数里直接修改了传入的原始数据数组，导致第二次处理数据时格式异常，进而让D3的后续渲染步骤出问题。

具体原因拆解 #

• 当你第一次调用plot(data)时，var ddd = arg;这行代码并没有创建数据的副本，ddd其实是对原始data数组的引用。
• 接着在ddd.forEach()里，你把每个数据对象的date字段从字符串转换成了Date对象——这直接修改了原始data数组里的内容！
• 第二次调用plot(data)时，parseDate()尝试解析已经是Date对象的d.date，这会返回NaN。x.domain()拿到一堆NaN后无法生成有效的刻度，后续的坐标轴、柱状图元素自然就没法正常渲染了。

修复方案（两种可选） #

方案1：每次处理数据时创建原始数据的深拷贝

把函数开头的var ddd = arg;替换成深拷贝代码，这样每次处理的都是原始数据的副本，不会影响原始数组：

// 替换原来的var ddd = arg;
var ddd = JSON.parse(JSON.stringify(arg));

方案2：处理数据时生成新对象，不修改原始数据

如果不想用深拷贝，也可以通过map生成新的处理后数据，避免触碰原始数据：

// 替换原来的ddd.forEach部分
var processedData = ddd.map(function(d) {
  return {
    date: parseDate(d.date),
    value: +d.value
  };
});

// 后续所有用到ddd的地方替换为processedData
x.domain(processedData.map(function(d) { return d.date; }));
y.domain([0, d3.max(processedData, function(d) { return d.value; })]);

g.selectAll(".bar") // 这里改成类选择器更规范
  .data(processedData)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .style("fill", "steelblue")
  .attr("x", function(d) { return x(d.date); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); });

额外小优化 #

另外提个小细节：你原来用的g.selectAll("bar")其实是错误的选择器（SVG里没有<bar>标签），改成.bar类选择器并给rect添加bar类名，能让代码更规范，也避免潜在的选择器冲突问题。

修改后，两次调用plot(data)都会正常生成独立的div和完整的柱状图啦！

内容的提问来源于stack exchange，提问作者LAHOUEL Youssouf