首頁猿問如何使用 d3.js...

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

JavaScript

至尊寶的傳說 2023-07-14 10:06:19

我的目標是將乘客的姓名添加到我的可視化中，以便當人們將光標移到某個點上時 - 顯示該人的姓名。到目前為止，我已經實現了目標：在對數刻度上繪制 x 軸和 y 軸，以及表格中的數據，其中 x 軸為年齡，y 軸為票價女的是圓的，男的是方的幸存者的顏色較淺，而死者的顏色較亮?，F在我想附加文本，但我不確定它是否應該是：// 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,? ? };? });

查看完整描述

2 回答

qq_遁去的一_1

TA貢獻1725條經驗獲得超8個贊

要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;

});

})

反對回復 2023-07-14

斯蒂芬大帝

TA貢獻1827條經驗獲得超8個贊

為了解決我想做的事情，我只需要執行以下操作：

using name: d.Name 讀取 name 列數據，然后在最后部分： add

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

在樣式組件之后。

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

反對回復 2023-07-14

2 回答
0 關注
122 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

2 回答

添加回答