-1
D3散布図のビジュアライゼーションを実行する際に大きな問題を抱えています。 Didntはデータを参照する方法を知っていたので、dropbox link hereから入手できます。タイタニックビジュアライゼーションのデータ読み込み
いくつか問題があります。
私のデータを読み込むのはちょっと混乱します。
- データが読み込まれていないようです。以前は成功しましたが、関数（グローバル）を参照することなくデータをロードしようとしています。しかし、あなたが見るように - 私は何も得ていません - []。
- スクリプトの最後に読み込み、d3.csv（function（d）{...}、FUNCTION）;で関数を参照する必要がありますか？なぜ私はスクリプトの上部に（私がしようとしている）変数に単純に読み込むことができません。そのような最初のオブジェクトを利用できるように？
私は、.enter（）、update（）、.exit（）についてのMike Bostockチュートリアルをよく知っているように感じました。しかし、私は私がcircle.circle（function（d）{return d;}）;を持っている "// ENTER + UPDATE"のコメントセクションに問題があることを知っています。私はこれを理解していない。
全体的に、私は、x軸としての運賃との散布図を作成するために探しています、私のy軸、「女性専用」のオプション、「男性のみ」、「子どもを通して、ループなどの年齢「All」で始まり、すべてで終わります。
私は現在、私がどこに抱えているのかをよりよく理解するため、これをさらに追加する予定です。
\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>
ありがとうございます。** 'Uncaught TypeError：未定義のプロパティ' filter 'を読み込めません。** ....データセットが定義されていないことを伝える。 – theStud54
ブラウザの開発者ツールでネットワークタブを確認しましたか？ csvファイルが正常に読み込まれているのを確認できますか？ – Gilsha
こんにちはギルシャ - これはうまくいった！今私の元の投稿から質問2について。何かご意見は？？私はちょうどENTER + UPDATE作品を解読しているようです。 – theStud54