我在學習 d3.js 可視化時嘗試實現以下問題。使用以下泰坦尼克號數據集：繪制散點圖：a) 男性乘客使用 SVG 正方形（寬度 5，x 和 y - 2.5）b) 女乘客使用半徑為2.8的圓c) 將幸存的列用作不透明度，使得死者的不透明度為 0.25，活人的不透明度為：1；填充不透明度：.1；描邊：黑色；制作散點圖軸，將 y 軸設為對數刻度，并在其標記上添加乘客姓名（使用 SVG 標題元素）。我正在實現以下代碼來實現我的目標，但是我沒有成功顯示我的圖表。誰能幫幫我嗎。我的代碼在這里：// 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("cx", function(d) {? ? ? return x(d.age);? ? })? ? .attr("cy", function(d) {? ? ? return y(d.fare);? ? })