如何使用 d3.js 将数据标签添加到我的散点图中

Question

我的目标是将乘客的姓名添加到我的可视化中，以便当人们将光标移到某个点上时 - 显示该人的姓名。

到目前为止，我已经实现了目标：

1. 在对数刻度上绘制 x 轴和 y 轴，以及表格中的数据，其中 x 轴为年龄，y 轴为票价

2. 女的是圆的，男的是方的

3. 幸存者的颜色较浅，而死者的颜色较亮。

现在我想附加文本，但我不确定它是否应该是：

// Add Text Labels

            svg.selectAll("text")

                .data(data_scatter)

                .enter()

                .append("text")

                .text(function(d) {

                    return d.name;

                })

                

                .attr("font_family", "sans-serif")  // Font type

                .attr("font-size", "11px")  // Font size

                .attr("fill", "darkgreen");   // Font color

我使用此代码进行可视化：

// set the dimensions and margins of the graph

var margin = {

    top: 10,

    right: 30,

    bottom: 30,

    left: 60

  },

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

  height = 400 - 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) {

  // All values are strings here, so we need to parse some of them.

  // You can do that using `+x` or `Number(x)`, where `x = "123"`

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

    return {

      age: Number(d.Age),

      // cabin: d.Cabin,

      // embarked: e.Embarked,

      fare: Number(d.Fare),

      // name: d.Name,

      // parch: Number(d.Parch),

      // passengerId: Number(d.PassengerId)

      // pclass: Number(Pclass),

      sex: d.Sex,

      // sibSp: Number(d.SibSp),

      survived: d.Survived === "1"

      // ticket: d.Ticket,

    };

  });

Answer 1

要title为每个添加属性path，请执行以下操作：请记住取消注释name: d.Name以确保name已知。另请注意，如果您在 DOM 检查器中打开生成的 HTML，您可以看到每个pathnow 都有一个title子节点。DOM 检查器应该在控制台之后始终是调试 d3.js 时首先检查的东西// set the dimensions and margins of the graphvar margin = {&nbsp; &nbsp; top: 10,&nbsp; &nbsp; right: 30,&nbsp; &nbsp; bottom: 30,&nbsp; &nbsp; left: 60&nbsp; },&nbsp; width = 460 - margin.left - margin.right,&nbsp; height = 400 - margin.top - margin.bottom;// append the svg object to the body of the pagevar svg = d3.select("#my_dataviz")&nbsp; .append("svg")&nbsp; .attr("width", width + margin.left + margin.right)&nbsp; .attr("height", height + margin.top + margin.bottom)&nbsp; .append("g")&nbsp; .attr("transform",&nbsp; &nbsp; "translate(" + margin.left + "," + margin.top + ")");//Read the datad3.csv("https://gist.githubusercontent.com/michhar/2dfd2de0d4f8727f873422c5d959fff5/raw/fa71405126017e6a37bea592440b4bee94bf7b9e/titanic.csv", function(rawData) {&nbsp; // All values are strings here, so we need to parse some of them.&nbsp; // You can do that using `+x` or `Number(x)`, where `x = "123"`&nbsp; const data = rawData.map(function(d) {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; age: Number(d.Age),&nbsp; &nbsp; &nbsp; // cabin: d.Cabin,&nbsp; &nbsp; &nbsp; // embarked: e.Embarked,&nbsp; &nbsp; &nbsp; fare: Number(d.Fare),&nbsp; &nbsp; &nbsp; name: d.Name,&nbsp; &nbsp; &nbsp; // parch: Number(d.Parch),&nbsp; &nbsp; &nbsp; // passengerId: Number(d.PassengerId)&nbsp; &nbsp; &nbsp; // pclass: Number(Pclass),&nbsp; &nbsp; &nbsp; sex: d.Sex,&nbsp; &nbsp; &nbsp; // sibSp: Number(d.SibSp),&nbsp; &nbsp; &nbsp; survived: d.Survived === "1"&nbsp; &nbsp; &nbsp; // ticket: d.Ticket,&nbsp; &nbsp; };&nbsp; });&nbsp; // Add X axis&nbsp; var x = d3.scaleLinear()&nbsp; &nbsp; .domain([0, 80])&nbsp; &nbsp; .range([0, width]);&nbsp; svg.append("g")&nbsp; &nbsp; .attr("transform", "translate(0," + height + ")")&nbsp; &nbsp; .call(d3.axisBottom(x));&nbsp; // Add Y axis&nbsp; var y = d3.scaleLog()&nbsp; &nbsp; .domain([1e+0, 1e+3])&nbsp; &nbsp; .range([height, 0]);&nbsp; svg.append("g")&nbsp; &nbsp; .call(d3.axisLeft(y));&nbsp; // Add dots&nbsp; svg.append('g')&nbsp; &nbsp; .selectAll("path")&nbsp; &nbsp; .data(data)&nbsp; &nbsp; .enter()&nbsp; &nbsp; .append("path")&nbsp; &nbsp; .attr("transform", function(d) {&nbsp; &nbsp; &nbsp; return "translate(" + [x(d.age), y(d.fare)] + ")";&nbsp; &nbsp; })&nbsp; &nbsp; .attr("d", function(d) {&nbsp; &nbsp; &nbsp; const path = d3.path();&nbsp; &nbsp; &nbsp; const shape = d.sex == "female" ? d3.symbolCircle : d3.symbolSquare;&nbsp; &nbsp; &nbsp; shape.draw(path, 8);&nbsp; &nbsp; &nbsp; return path.toString();&nbsp; &nbsp; })&nbsp; &nbsp; .style("fill-opacity", function(d) {&nbsp; &nbsp; &nbsp; return d.survived ? "0.3" : "1";&nbsp; &nbsp; })&nbsp; &nbsp; .append("title")&nbsp; &nbsp; .text(function(d) {&nbsp; &nbsp; &nbsp; return d.name;&nbsp; &nbsp; });})<script src="https://d3js.org/d3.v4.js"></script><!-- Create a div where the graph will take place --><div id="my_dataviz"></div>

Answer 2

为了解决我想做的事情，我只需要执行以下操作：using name: d.Name 读取 name 列数据，然后在最后部分： add.append("svg:title")&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.text(function(d)&nbsp;{&nbsp;return&nbsp;d.name});在样式组件之后。当我将鼠标悬停在这些点上时，这会让我显示名称。