爲泰坦尼克號可視化加載數據時出現問題

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。