如何使用 d3.js 從數據中向我的散點圖添加標簽

Question

我正在學習 d3.js 進行可視化和使用泰坦尼克號數據集

我的目標是將乘客的姓名添加到我的可視化中，這樣當一個人將光標移到一個點上時，就會顯示該人的姓名。

到目前為止，我已經實現了以下目標：

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, }; }); // 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"; }) })

 <script src="https://d3js.org/d3.v4.js"></script> <!-- Create a div where the graph will take place --> <div id="my_dataviz"></div>

我到目前為止：

現在我想為點添加名稱標簽。

誰能幫幫我嗎。

Answer 1

要為每個path添加title屬性，請執行以下操作：

記得取消注釋name: d.Name以確保name是已知的。 另請注意，如果您在 DOM 檢查器中打開生成的 HTML，您可以看到每個path現在都有一個title子節點。 在調試 d3.js 時，DOM 檢查器應該 - 在控制台之后 - 始終是您檢查的第一件事

 // 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. 使用 name: d.Name 讀取 name 列數據，然后在最后一部分：添加

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

在樣式組件之后。

當我將鼠標懸停在點上時，這讓我可以顯示名稱。