Javascript 分析D3 d="；时出错&引用；重复两次

我正在从这个代码示例中研究链式转换 我已经设置了自己的代码来解析csv文件而不是tsv。但是，当我从新视图切换到现有视图时，在Javascript控制台中解析D3 d=“”时会出现两次错误。不确定是否是每个函数的数据导致了错误。代码如下：

var margin = {top: 20, right: 50, bottom: 30, left: 60},
    width = 878 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y%d%m").parse;

    var x = d3.time.scale()
    .range([0, width]);

    var y = d3.scale.linear()
    .range([height, 0]);

    var color = d3.scale.category10();

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

    var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

    var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

    var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")



//Add grid lines
function make_X_axis() {        
    return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(6)
}

function make_Y_axis() {        
    return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(9)
}

//Parse data
d3.csv("data/newdata2.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
      d.date = parseDate(d.date);
    d["New"] = +d["New"];
    d["Existing"] = +d["Existing"];
  });


  var homes = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, price: +d[name]};
    })
  };
});

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(homes, function(c) { return d3.min(c.values, function(v) { return v.price; }); }),
    d3.max(homes, function(c) { return d3.max(c.values, function(v) { return v.price; }); })
    ]);

  svg.append("g")  
  .attr("class", "grid")
  .attr("transform", "translate(0," + height + ")")
  .call(make_X_axis()
    .tickSize(-height, 0, 0)
    .tickFormat("")
    )

  svg.append("g")         
  .attr("class", "grid")
  .call(make_Y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat("")
    )

  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

  svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)

  svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Thousands($)");

  var city = svg.selectAll(".city")
  .data(homes)
  .enter().append("g")
  .attr("class", "city");


  city.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.name); });

  city.append("text")
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.price) + ")"; })
  .attr("x", 3)
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });

  d3.selectAll("input").on("change", change);

  var timeout = setTimeout(function() {
    d3.select("input[value=\"Existing\"]").property("checked", true).each(change);
}, 2000);

  function change() {
    clearTimeout(timeout);

    city = this.value;

    // First transition the line & label to the new city.
    var t0 = svg.transition().duration(750);
    t0.selectAll(".line").attr("d", line);
    t0.selectAll(".label").attr("transform", transform).text(city);

    // Then transition the y-axis.
    y.domain(d3.extent(data, function(d) { return d[city]; }));
    var t1 = t0.transition();
    t1.selectAll(".line").attr("d", line);
    t1.selectAll(".label").attr("transform", transform);
    t1.selectAll(".y.axis").call(yAxis);
}

function transform(d) {
    return "translate(" + x(d.date) + "," + y(d[city]) + ")";
}
});

---

在创建线的代码中，引用

d.values

作为绘制路径的数据：

city.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });

但是，在变更处理程序中，您只需调用（两次）

使两位代码保持一致应该可以解决这个问题，即将change函数中的两个调用更改为

t0.selectAll(".line").attr("d", function(d) { return line(d.values); });

---

除了从CSV而不是TSV读取之外，您是否更改了代码中的任何内容？几乎可以肯定，问题在于数据。你能提供一个样品吗？没有其他的都一样。这里是谷歌文档。谢谢你能把它放在一个我不需要帐户就能看到它的地方吗？这个链接不需要登录。你的数据有“新”和“现有”标题，而你的代码使用“纽约”和“旧金山”。这很有效！然而，现在当我从现有切换回新时，我得到了一个解析错误。我需要在其他地方做同样的更新吗？嗯，你不需要改变任何其他东西。您得到的是完全相同的错误吗？不，是错误：解析多行的d=“M0，NaNC0..”等时出现问题您的JSFIDLE对我不起作用--它尝试加载的数据不存在。无论如何，看起来是y轴域的更新导致了问题。尝试

y.domain（d3.extent（数据，函数（d）{returnd[city].map（函数（e）{returne.price；}）；}））

。

t0.selectAll(".line").attr("d", function(d) { return line(d.values); });