如何使用与特定字符串匹配的列中的值在 d3.js 中进行可视化

Question

我在学习 d3.js 可视化时尝试实现以下问题。

使用以下泰坦尼克号数据集：

1. 绘制散点图：

a) 男性乘客使用 SVG 正方形（宽度 5，x 和 y - 2.5）

b) 女乘客使用半径为2.8的圆

c) 将幸存的列用作不透明度，使得死者的不透明度为 0.25，活人的不透明度为：1；填充不透明度：.1；描边：黑色；

1. 制作散点图轴，将 y 轴设为对数刻度，并在其标记上添加乘客姓名（使用 SVG 标题元素）。

我正在实现以下代码来实现我的目标，但是我没有成功显示我的图表。

谁能帮帮我吗。

我的代码在这里：

// set the dimensions and margins of the graph

var margin = {

    top: 20,

    right: 30,

    bottom: 30,

    left: 40

  },

  width = 960 - margin.left - margin.right,

  height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page

var svg = d3.select("#my_dataviz")

  .append("svg")

  .attr("width", width + margin.left + margin.right)

  .attr("height", height + margin.top + margin.bottom)

  .append("g")

  .attr("transform",

    "translate(" + margin.left + "," + margin.top + ")");

//Read the data

d3.csv("https://gist.githubusercontent.com/michhar/2dfd2de0d4f8727f873422c5d959fff5/raw/fa71405126017e6a37bea592440b4bee94bf7b9e/titanic.csv", function(rawData) {

  const data = rawData.map(function(d) {

    return {

      age: Number(d.age),

      fare: Number(d.fare),

      sex: d.sex,

      survived: d.survived === "1",

      name: d.name

    };

  });

  // Add X axis

  var x = d3.scaleLinear()

    .domain([0, 80])

    .range([0, width]);

  svg.append("g")

    .attr("transform", "translate(0," + height + ")");

  // Add Y axis

  var y = d3.scaleLog()

    .domain([1e+0, 1e+3])

    .range([height, 0]);

  svg.append("g");

  // Add dots

  svg.append('g')

    .selectAll("dot").select("female")

    .data(data)

    .enter()

    .append("circle")

    .attr("cx", function(d) {

      return x(d.age);

    })

    .attr("cy", function(d) {

      return y(d.fare);

    })

    //.attr("r", 2.8)

    .style("opacity", function(d) {

      return d.survived ? "1" : "0.25";

    })

    .style("stroke", "black")

    .style("fill-opacity", 0.1)

  svg.append('g')

    .selectAll("dot").select("male")

    .data(data)

    .enter()

    .append("rect")

    .attr("cx", function(d) {

      return x(d.age);

    })

    .attr("cy", function(d) {

      return y(d.fare);

    })

Answer 1

你真的非常需要阅读手册，尤其是 SVG 手册。rect节点没有cxand cy，它们有xand y、width、 and height。并且circle需要一个半径r才能可见。并且您给您读到的所有属性都指定了小写开头字母。他们需要资本。查找有关调试的手册。// set the dimensions and margins of the graphvar margin = {    top: 20,    right: 30,    bottom: 30,    left: 40  },  width = 960 - margin.left - margin.right,  height = 500 - margin.top - margin.bottom;// append the svg object to the body of the pagevar svg = d3.select("#my_dataviz")  .append("svg")  .attr("width", width + margin.left + margin.right)  .attr("height", height + margin.top + margin.bottom)  .append("g")  .attr("transform",    "translate(" + margin.left + "," + margin.top + ")");//Read the datad3.csv("https://gist.githubusercontent.com/michhar/2dfd2de0d4f8727f873422c5d959fff5/raw/fa71405126017e6a37bea592440b4bee94bf7b9e/titanic.csv", function(rawData) {  const data = rawData.map(function(d) {    return {      age: Number(d.Age),      fare: Number(d.Fare),      sex: d.Sex,      survived: d.Survived === "1",      name: d.Name    };  });  // Add X axis  var x = d3.scaleLinear()    .domain([0, 80])    .range([0, width]);  svg.append("g")    .attr("transform", "translate(0," + height + ")");  // Add Y axis  var y = d3.scaleLog()    .domain([1e+0, 1e+3])    .range([height, 0]);  svg.append("g");  // Add dots  svg.append('g')    .selectAll("dot").select("female")    .data(data)    .enter()    .append("circle")    .attr("cx", function(d) {      return x(d.age);    })    .attr("cy", function(d) {      return y(d.fare);    })    .attr("r", 2.8)    .style("opacity", function(d) {      return d.survived ? "1" : "0.25";    })    .style("stroke", "black")    .style("fill-opacity", 0.1)  svg.append('g')    .selectAll("dot").select("male")    .data(data)    .enter()    .append("rect")    .attr("x", function(d) {      return x(d.age);    })    .attr("y", function(d) {      return y(d.fare);    })    .attr("width", 5)    .attr("height", 5)    .style("opacity", function(d) {      return d.survived ? "1" : "0.25";    })    .style("stroke", "black")    .style("fill-opacity", 0.1)    .append("svg:title")    .text(function(d) {      return d.name    });})<script src="https://d3js.org/d3.v4.js"></script><div id="my_dataviz"></div>