-1
Имея некоторые серьезные проблемы с получением визуализации визуализации D3. Не знал, как ссылаться на данные, поэтому его можно получить от dropbox link here.Проблемы с загрузкой данных для титанической визуализации
Есть несколько проблем.
Я немного растерялся о загрузке моих данных.
- Возможно, я не могу загрузить данные. Раньше я был успешным, но я пытаюсь загрузить данные без ссылки на функцию (т. Е. Глобальную). Однако, как вы увидите, я ничего не получаю - [].
- Нужно ли загружать его в нижней части моего скрипта, а затем ссылаться на функцию в d3.csv (function (d) {...}, FUNCTION) ;? Почему я не могу просто загрузить его в переменную (как я пытаюсь) в верхней части моего скрипта. Так что его первый объект доступен?
Мне также показалось, что у меня была хорошая ручка в учебнике Майка Бостока о .enter(), update(), .exit(). Но я знаю, что у меня есть проблема в разделе комментариев «// ENTER + UPDATE», где у меня есть circle.circle (function (d) {return d;}) ;. Я не понимаю этого.
В целом, я ищу, чтобы создать график рассеяния с тарифом, как моя ось х, возраст, как моя ось у, то проходной опционам «Женщины только», «Мужской только», «Детей Only "и" All "(начиная и заканчивая 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: Не удается прочитать фильтр свойств неопределенного' ** .... Сигнализация о том, что набор данных не определяется. – theStud54
Вы проверили вкладку своей сети в инструментах разработчика браузера? Вы можете увидеть загруженный там файл csv? – Gilsha
Привет Гилша - это сработало! Теперь о вопросе 2 из моего оригинального сообщения. Есть предположения?? Я просто не могу взломать элемент ВВОД + ОБНОВЛЕНИЕ. – theStud54