Question

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

对于俄亥俄州图表，与第一个数据对象关联的属性都不是有效的字符串/数字，因此图表选择400 Bad Request作为日期，即使它不在数据中。不幸的是，由于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>，我无法在Plunkr上重现代码。我已经在下面包含了js和数据样本，希望错误可能很明显。

Plunkr上的完整代码：http://plnkr.co/edit/B0z0cyZRHfiVelGx6pnO?p=preview

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

Ohio 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

Michigan Shootings.tsv

Entity

俄亥俄州图表

密歇根州图表

Answer 1

您的代码中存在问题：

您似乎一遍又一遍地解析日期。只需这样做一次，永远将它们视为日期。
您的enter，update，exit几乎是正确的。我在数据绑定中删除了你的关键功能，你在这里并不需要它，因为索引对你有用。我还在.merge版本4中添加了d3 call you need。
最后，我在密歇根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中运行。

d3js：为什么第一个条形数据显示不正确？

1 个答案: