为泰坦尼克号可视化加载数据时出现问题

Question

让我的D3散点图可视化运行时遇到了一些麻烦。不知道如何参考数据，所以从dropbox link here可用。

有几个问题。

1. 我对加载我的数据有点困惑。

   • 我似乎无法获取数据加载。我以前是成功的，但我试图加载数据而不必引用一个函数（即全局）。然而，正如你将看到的 - 我什么都没有 - []。
   • 我是否需要将它加载到脚本的底部，然后在d3.csv（function（d）{...}，FUNCTION）中引用函数;？为什么不能简单地将它加载到我的脚本顶部的一个变量（正如我试图）。这样它的第一个对象可用？

2. 我还觉得我在Mike Bostock教程中对.enter（），update（），.exit（）有很好的处理。但是我知道在“// ENTER + UPDATE”的注释部分有一个问题，我在这里有circle.circle（function（d）{return d;}）;.我不明白这一点。

总体来说，我期待创建车费我的x轴的散点图，年龄我的y轴，然后通过“只限女性”的选项，“只有男”，“儿童环只有“和”全部“（以全部开始和结束）。

我打算加入更多内容，因为我可以更好地了解目前我在哪里绊倒。

\t \t \t d3.csv("titanic_full.csv", function(d) { 
 
\t \t \t return { 
 
\t \t \t  fare: +d.fare, 
 
\t \t \t  age: d.age == '' ? NaN : +d.age, 
 
\t \t \t  sibsp: +d.sibsp, 
 
\t \t \t  pclass: +d.pclass, 
 
\t \t \t  sex: d.sex, 
 
\t \t \t  name: d.name, 
 
\t \t \t  survived: d.survived 
 

 
\t \t \t }; 
 
\t \t \t }, function(error, d) { 
 
\t \t \t //Filter out erroneous age values (263 rows are removed) 
 
\t \t \t var dataset = d.filter(function(d) { 
 
\t \t \t  if (d['age'] >= 0) { 
 
\t \t \t  return d; 
 
\t \t \t  } 
 
\t \t \t }); 
 

 
\t \t \t //*Main Elements Setup* 
 

 
\t \t \t //Width and height 
 
\t \t \t var w = 650; 
 
\t \t \t var h = 650; 
 
\t \t \t var padding = 20; 
 

 
\t \t \t //Create scale functions 
 
\t \t \t var xScale = d3.scale.linear() 
 
\t \t \t  .domain([0, d3.max(dataset, function(d) { 
 
\t \t \t  return d.fare; 
 
\t \t \t  })]) 
 
\t \t \t  .range([padding, w - padding * 2]); // introduced this to make sure values are not cut off 
 

 
\t \t \t var yScale = d3.scale.linear() 
 
\t \t \t  .domain([0, d3.max(dataset, function(d) { 
 
\t \t \t  return d.age; 
 
\t \t \t  })]) 
 
\t \t \t  .range([h - padding, padding]); 
 

 
\t \t \t var xAxis = d3.svg.axis() 
 
\t \t \t  .scale(xScale) 
 
\t \t \t  .orient("bottom"); 
 

 
\t \t \t var yAxis = d3.svg.axis() 
 
\t \t \t  .scale(yScale) 
 
\t \t \t  .orient("left"); 
 

 
\t \t \t //Create SVG element 
 
\t \t \t var svg = d3.select("body") 
 
\t \t \t  .append("svg") 
 
\t \t \t  .attr("width", w) 
 
\t \t \t  .attr("height", h); 
 

 
\t \t \t //Show Axes 
 
\t \t \t svg.append('g') 
 
\t \t \t  .attr('class', 'x axis') 
 
\t \t \t  .attr('transform', 'translate(0,' + (h - padding) + ')') 
 
\t \t \t  .call(xAxis); 
 

 
\t \t \t svg.append('g') 
 
\t \t \t  .attr('class', 'y axis') 
 
\t \t \t  .attr('transform', 'translate(' + padding + ',0)') 
 
\t \t \t  .call(yAxis); 
 

 
\t \t \t function update(dataset) { 
 
\t \t \t  //DATA JOIN 
 
\t \t \t  //Join new data with old elements, if any. 
 
\t \t \t  var circle = svg.selectAll('circle') 
 
\t \t \t  .data(dataset); 
 

 
\t \t \t  //UPDATE 
 
\t \t \t  //Update old elements as needed. 
 
\t \t \t  circle.attr('class', 'update'); 
 

 
\t \t \t  //ENTER 
 
\t \t \t  //Create new elements as needed. 
 
\t \t \t  circle.enter().append('circle') 
 
\t \t \t  .attr('class', 'enter') 
 
\t \t \t  .transition() 
 
\t \t \t  .duration(1000) 
 
\t \t \t  .attr("cx", function(d) { 
 
\t \t \t   return xScale(d.fare); 
 
\t \t \t  }) 
 
\t \t \t  .attr("cy", function(d) { 
 
\t \t \t   return yScale(d.age); 
 
\t \t \t  }) 
 
\t \t \t  .attr("r", 6) 
 
\t \t \t  .attr('fill', function(d) { 
 
\t \t \t   if (d.survived === '0') { 
 
\t \t \t   return 'green'; 
 
\t \t \t   } else { 
 
\t \t \t   return 'red'; 
 
\t \t \t   } 
 
\t \t \t  }) 
 

 
\t \t \t  //ENTER + UPDATE 
 
\t \t \t  //Appending to the enter selection expands the update selection to include 
 
\t \t \t  //entering elements; so, operations on the update selection after appending to 
 
\t \t \t  //the enter selection will apply to both entering and updating nodes. 
 
\t \t \t  circle.circle(function(d) { 
 
\t \t \t  return d; 
 
\t \t \t  }); 
 

 
\t \t \t  //EXIT 
 
\t \t \t  //Remove old elements as needed. 
 
\t \t \t  circle.exit().remove(); 
 
\t \t \t }; 
 

 
\t \t \t //The initial display. 
 
\t \t \t update(dataset); 
 

 
\t \t \t //Work through each selection 
 
\t \t \t var options = ['Female Only', 'Male Only', 'Children Only', 'All'] 
 
\t \t \t var option_idx = 0; 
 
\t \t \t console.log('next') 
 
\t \t \t var option_interval = setInterval(function(options) { 
 
\t \t \t  if (options == 'Female Only') { 
 
\t \t \t  var filteredData = dataset.filter(function(d) { 
 
\t \t \t   if (d['sex'] == 'female') { 
 
\t \t \t   return d; 
 
\t \t \t   } 
 
\t \t \t  }) 
 
\t \t \t  } else if (options == 'Male Only') { 
 
\t \t \t  var filteredData = dataset.filter(function(d) { 
 
\t \t \t   if (d['sex'] == 'male') { 
 
\t \t \t   return d; 
 
\t \t \t   } 
 
\t \t \t  }) 
 
\t \t \t  } else if (options == 'Children Only') { 
 
\t \t \t  var filteredData = dataset.filter(function(d) { 
 
\t \t \t   if (d['age'] <= 13) { 
 
\t \t \t   return d; 
 
\t \t \t   } 
 
\t \t \t  }) 
 
\t \t \t  } else if (options == 'All') { 
 
\t \t \t  var filteredData = dataset.filter(function(d) { 
 
\t \t \t   return d; 
 
\t \t \t  }) 
 
\t \t \t  }; 
 
\t \t \t  console.log('interval') 
 
\t \t \t  option_idx++; // increment by one 
 
\t \t \t  update(filteredData); 
 
\t \t \t  if (option_idx >= options.length) { 
 
\t \t \t  clearInterval(option_interval); 
 
\t \t \t  }; 
 
\t \t \t }, 1500); 
 
\t \t \t });

\t \t .axis path, 
 
\t \t .axis line { 
 
\t \t fill: none; 
 
\t \t stroke: black; 
 
\t \t shape-rendering: crispEdges; 
 
\t \t } 
 
\t \t .axis text { 
 
\t \t font-family: sans-serif; 
 
\t \t font-size: 8px; 
 
\t \t } 
 
\t \t

<title>Titanic Visualization - Fare and Age Survival</title>

Answer 1

好的，所以我有一个答案，但我可能不会解释这一点。

1.我对加载数据有点困惑。

在@Gilsha的帮助下，我能够重新配置脚本以首先加载数据，其余脚本是d3.csv函数的“回调”部分。这工作顺利。我也能够过滤我的数据，立即删除空白。第一部分：

d3.csv("titanic_full.csv", function(d) { 
      return { 
      fare: +d.fare, 
      age: d.age == '' ? NaN : +d.age, 
      sibsp: +d.sibsp, 
      pclass: +d.pclass, 
      sex: d.sex, 
      name: d.name, 
      survived: d.survived 

      }; 
     }, function(error, d) { 
      //Filter out erroneous age values (263 rows are removed) 
      var dataset = d.filter(function(d) { 
      if (d['age'] >= 0) { 
       return d; 
      } 
      }); 

      //Rest of script here. 

** 2。我也觉得我对Mike的Bostock教程有一个很好的把握。关于.enter（），update（），.exit（）。 Link to Bostock Tutorial I was following **

夫妇的事情，我做错了在这里，让我伤心。我被困在主要项目是这一部分：

//ENTER + UPDATE 
       //Appending to the enter selection expands the update selection to include 
       //entering elements; so, operations on the update selection after appending to 
       //the enter selection will apply to both entering and updating nodes. 
       circle.circle(function(d) {return d;}); 

基本上，我太密切关注的教程，并没有意识到，当他使用“text.text（函数（d）{返回d;} ）;“，他将文本属性（？）设置为某个值。这是我相信我应该对我的ENTER和UPDATE选项（我期望在DOM中的所有项目）进行任何更改。所以，当Mike在做text.text，我用circle.circle复制时，我应该有circle.text（.....）。或者我想要的任何东西。任何人都在意评论或解释，更好？

PS - 我有很多其他的错误...在整个过程中，特别是在建立我的间隔的部分！

Answer 2

你应该写的d3.csv回调函数内整个代码。试试这种方式。

d3.csv("titanic_full.csv", function(d) { 
    return { 
    fare: +d[fare], 
    age: d.age == '' ? NaN : +d.age, 
    sibsp: +d.sibsp, 
    pclass: +d.pclass 
    }; 
}, function(error, dataset) { 
    //Filter out erroneous age values (263 rows are removed) 
    var dataset = dataset.filter(function(d) { 
    if (d['age'] >= 0) { 
     return d; 
    } 
    }); 
    //Remaining code 
}); 

有关更多详细信息，请参阅here。