在运行D3散点图可视化时遇到了一些巨大的问题。我不知道如何引用数据，所以它可以从这里的dropbox链接中获得。
有几个问题。
-
我对加载数据有点困惑。
- 我似乎无法加载数据。我以前取得过成功，但我尝试在不必引用函数（即全局函数）的情况下加载数据。然而，正如你所看到的，我一无所获
- 我是否需要在脚本底部加载它，然后引用d3.csv中的函数（函数（d）｛…｝，function）；？为什么我不能简单地将它加载到脚本顶部的一个变量（正如我正在尝试的那样）。这是第一个可用的对象吗
-
我也觉得我很好地掌握了Mike Bostock关于.enter（）、update（）、.exit（）的教程。但我知道我在"//enter+update"的评论部分有一个问题，我有circle。circle（函数（d）{return d；}）；。我不明白。
总的来说，我希望创建一个以票价为x轴、年龄为y轴的散点图，然后循环选择"仅限女性"、"仅限男性"、"限儿童"one_answers"全部"（以全部开始和结束）。
我计划增加更多内容，因为我对自己目前的困境有了更好的了解。
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;
}
});
//*Main Elements Setup*
//Width and height
var w = 650;
var h = 650;
var padding = 20;
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d.fare;
})])
.range([padding, w - padding * 2]); // introduced this to make sure values are not cut off
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d.age;
})])
.range([h - padding, padding]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Show Axes
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + (h - padding) + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + padding + ',0)')
.call(yAxis);
function update(dataset) {
//DATA JOIN
//Join new data with old elements, if any.
var circle = svg.selectAll('circle')
.data(dataset);
//UPDATE
//Update old elements as needed.
circle.attr('class', 'update');
//ENTER
//Create new elements as needed.
circle.enter().append('circle')
.attr('class', 'enter')
.transition()
.duration(1000)
.attr("cx", function(d) {
return xScale(d.fare);
})
.attr("cy", function(d) {
return yScale(d.age);
})
.attr("r", 6)
.attr('fill', function(d) {
if (d.survived === '0') {
return 'green';
} else {
return 'red';
}
})
//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;
});
//EXIT
//Remove old elements as needed.
circle.exit().remove();
};
//The initial display.
update(dataset);
//Work through each selection
var options = ['Female Only', 'Male Only', 'Children Only', 'All']
var option_idx = 0;
console.log('next')
var option_interval = setInterval(function(options) {
if (options == 'Female Only') {
var filteredData = dataset.filter(function(d) {
if (d['sex'] == 'female') {
return d;
}
})
} else if (options == 'Male Only') {
var filteredData = dataset.filter(function(d) {
if (d['sex'] == 'male') {
return d;
}
})
} else if (options == 'Children Only') {
var filteredData = dataset.filter(function(d) {
if (d['age'] <= 13) {
return d;
}
})
} else if (options == 'All') {
var filteredData = dataset.filter(function(d) {
return d;
})
};
console.log('interval')
option_idx++; // increment by one
update(filteredData);
if (option_idx >= options.length) {
clearInterval(option_interval);
};
}, 1500);
}); .axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 8px;
}
<title>Titanic Visualization - Fare and Age Survival</title>您应该在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
});
请参阅此处了解更多详细信息。
好的，我有一个答案，但我可能不会解释这个问题。
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（）的教程。我正在关注的Bostock教程链接**
我在这里做错了几件事，这让我很沮丧。我被卡住的主要项目是这部分：
//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）{return d；}）；"时，他正在将text属性（？）设置为某个值。这就是我认为应该设置对ENTER和UPDATE选择（我希望在DOM中的所有项）的任何更改的地方。所以，当Mike在做text.text时，我用circle.circle复制，我应该有circle.text（……）。或者我想要的任何东西。有人想更好地对此发表评论或解释吗？？
PS-我还有很多其他错误。。。贯穿始终，尤其是在建立我的间歇期的部分！