d3js：为什么第一个酒吧的数据显示不正确？

Question

我正在完成一个条形图，我遇到了一个奇怪的问题：第一个栏显示不正确。我有两个图表和两个相应的tsv文件。显示密歇根州图表时，即使其数据对象属性d.Injured等于2，第一个图标也不会显示。

对于俄亥俄州图表，与第一个数据对象关联的所有属性都不是有效字符串/数字，因此图表挑选了1969作为日期，即使它不在数据中。不幸的是，由于400 Bad Request，我无法复制Plunkr上的代码。我已经包含了下面的js和数据示例，希望这个错误可能很明显。

上Plunkr

全码：http://plnkr.co/edit/B0z0cyZRHfiVelGx6pnO?p=preview

d3.select('input[type=button]').on("click",function(){ 
    country = document.getElementById("state").value; 
d3.tsv(country + " Shootings.tsv",function(d,i){ 
    d.Date = parser(d.Date); 
    d.Killed = +d.Killed; 
    d.Injured = +d.Injured; 
    return d; 

}, function(error,data){ 

    if (error){throw error}; 
console.log(data); 

data.sort(function(a,b){ 
    // Turn your strings into dates, and then subtract them 
    // to get a value that is either negative, positive, or zero. 
    return new Date(a.Date) - new Date(b.Date); 
}); 

//Visualization 
var readTime = d3.timeFormat("%Y-%m"); 

x.domain(data.map(function(d){return readTime(d.Date)})); 
y.domain([0,d3.max(data, function(d){return d.Injured})]); 

//Create axes 

var updateXaxis = xaxis 
    .attr("class","xaxis") 
    .attr("transform","translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

var updateYaxis = yaxis 
    .attr("class","yaxis") 
    .call(d3.axisLeft(y).ticks(5)); 

//Create bars 
var newState = g.selectAll(".bars") 
    .data(data,function(d){console.log(d); return d}); 
// the first bound data was: Object {State: "", School: undefined, Date: null, Killed: NaN, Injured: NaN…} 

var StateWithContent = newState.enter().append("rect") 
     .attr("class","bars") 
     .attr("width", x.bandwidth()) 
     .attr("x",function(d){return x(readTime(d.Date))}) 
     .attr("height",function(d){return height - y(d.Injured)}) 
     .attr("y",function(d){return y(d.Injured)}); 

console.log(newState.exit()) 
newState.exit().remove(); 



}); 
}); 

</script> 
</body> 

俄亥俄州Shootings.tsv

State School Date Killed Injured 
Ohio Linden-McKinley High School 2016-10 0 2 
Ohio Madison Jr/Sr High School 2016-2 0 4 
Ohio Charles F. Brush High School 2014-2 0 0 
Ohio LaSalle High School 2013-4 0 1 
Ohio Chardon High School 2012-2 3 6 
Ohio SuccessTech Academy 2007-10 1 4 
Ohio Wickliffe Middle school 1994-11 1 5 

密歇根Shootings.tsv

State School Date Killed Injured 
Michigan Davidson Middle School 2013-02 1 0 
Michigan Osborn High School 2013-01 0 1 
Michigan Northern High School 2011-12 0 1 
Michigan Mumford High School 2010-09 0 2 
Michigan Henry Ford High School 2008-10 1 3 
Michigan Buell Elementary School 2000-02 1 0 
Michigan Chelsea High School 1993-12 1 2 

俄亥俄图

密歇根图

Answer 1

代码中的夫妇问题：

1. 你似乎保持了一遍又一遍分析的日期。只要做到这一点，并把它们作为永恒的日期。
2. 您的enter,update,exit几乎是正确的。我在数据绑定中删除了你的关键函数，你不需要它，因为索引会适合你。我还添加了.mergecall you needd3版本4.
3. 最后，我在密歇根TSV文件中遇到了很多麻烦。看起来好像有一个错误的空间，搞乱了d3的解析。

这里是我的最新动态的重构：

d3.select('input[type=button]').on("click", function() { 

    var country = document.getElementById("state").value; 

    d3.tsv(country + ".tsv", function(d, i) { 
    d.Date = parser(d.Date); 
    d.Killed = +d.Killed; 
    d.Injured = +d.Injured; 
    return d; 

    }, function(error, data) { 

    if (error) { 
     throw error 
    }; 
    console.log(data); 

    data.sort(function(a, b) { 
     return a.Date - b.Date; 
    }); 

    x.domain(data.map(function(d) { 
     return d.Date; 
    })); 
    y.domain([0, d3.max(data, function(d) { 
     return d.Injured; 
    })]); 

    //Create axes 
    var updateXaxis = xaxis 
     .attr("class", "xaxis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%B %Y"))); 

    var updateYaxis = yaxis 
     .attr("class", "yaxis") 
     .call(d3.axisLeft(y).ticks(5)); 

    var newState = g.selectAll(".bars") 
     .data(data); 

    newState.enter().append("rect") 
     .attr("class", "bars") 
     .merge(newState) 
     .attr("width", x.bandwidth()) 
     .attr("x", function(d) { 
     return x(d.Date); 
     }) 
     .attr("height", function(d) { 
     return height - y(d.Injured); 
     }) 
     .attr("y", function(d) { 
     return y(d.Injured); 
     }); 

    newState.exit().remove(); 

    }); 

}); 

注意，plunker不喜欢在TSV文件名的空间。

这里它运行在plunker。