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

Question

我的目标是将乘客的姓名添加到我的可视化中，以便当人们将光标移到某个点上时 - 显示该人的姓名。到目前为止，我已经实现了目标：在对数刻度上绘制 x 轴和 y 轴，以及表格中的数据，其中 x 轴为年龄，y 轴为票价女的是圆的，男的是方的幸存者的颜色较浅，而死者的颜色较亮。现在我想附加文本，但我不确定它是否应该是：// 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 graphvar 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 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) {  // 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 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,

    };

  });

  // Add X axis

  var x = d3.scaleLinear()

    .domain([0, 80])

    .range([0, width]);

  svg.append("g")

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

    .call(d3.axisBottom(x));

  // Add Y axis

  var y = d3.scaleLog()

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

    .range([height, 0]);

  svg.append("g")

    .call(d3.axisLeft(y));

  // Add dots

  svg.append('g')

    .selectAll("path")

    .data(data)

    .enter()

    .append("path")

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

      return "translate(" + [x(d.age), y(d.fare)] + ")";

    })

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

      const path = d3.path();

      const shape = d.sex == "female" ? d3.symbolCircle : d3.symbolSquare;

      shape.draw(path, 8);

      return path.toString();

    })

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

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

    })

    .append("title")

    .text(function(d) {

      return d.name;

    });

})

<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

为了解决我想做的事情，我只需要执行以下操作：

1. using name: d.Name 读取 name 列数据，然后在最后部分： add

.append("svg:title")  
         .text(function(d) { return d.name});

在样式组件之后。

当我将鼠标悬停在这些点上时，这会让我显示名称。