我正在尝试从我的数据点显示信息，但是我一直收到此错误，我无法弄清原因。我在互联网上进行了搜索，但不了解所提供的其他解决方案。 这是紧急情况，因为我今天中午12点之前需要它： 任何帮助将不胜感激。
信息：用户将鼠标悬停在一个点上，数组中的信息将显示在信息框中！错误是针对js中的第22行
html
<!DOCTYPE html>
<html>
<head>
<title>Assignment 3 - web application
</title>
<meta charset="utf-8" />
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h2 id="ttl">CWD 3500 - ASSIGNMENT 03 - USING FUNCTIONS</h2>
<div class="infobox" style="visibility: hidden;">
<h3 class="lName">Book Title</h3>
<h4 class="dR">Book Author</h4>
<p>Published in: <strong class="rN">year</strong></p>
<p>Word count: <strong class="name">published</strong></p>
</div>
<svg></svg>
<script src="js/main.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
</body>
js
window.onload = function () {
'use strict';
// dimensions of the svg container
const SVG_HEIGHT = 875;
const SVG_WIDTH = 800;
// size multiplier
const SIZE_MULTIPLIER = 1.5;
var datapoints = [
{
value: "A",
site: "Open to recruitment",
dR: "Freedman Dr Orit",
body: "breast",
rN: "Mueller, Ms Ann",
name: "(MACRO GENICS) CP-MGAH22-04 / SOPHIA",
lName: "A Phase 3, Randomized Study of Margetuximab Plus Chemotherapy vs Trastuzumab Plus Chemotherapy in the Treatment of Patients With HER2+ Metastatic Breast Cancer Who Have Received Prior Anti-HER2 Therapies and Require Systemic Treatment",
date: 3 / 18 / 2016,
recuted: 3,
target: 5,
perc: 60,
gov: "NCT02492711"
},
{
value: "B",
site: "Open to recruitment",
dR: "Shim, Dr Kathy",
body: "Gastrointestinal",
rN: " Papaleo, Ms Marianna ",
name: "(CCTG) CRC.7",
lName: "A Phase II/III Trial of Neoadjuvant FOLFOX, With Selective Use of Combined Modality Chemoradiation Versus Preoperative Combined Modality Chemoradiation for Locally Advanced Rectal Cancer Patients Undergoing Low Anterior Resection With Total Mesorectal Excision",
date: 3 / 29 / 2016,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT01515787"
},
{
value: "C",
site: "Open to recruitment",
dR: "Lo, Dr Gregory",
body: "Genito-Urinary",
rN: " Cecchetto, Ms Tammy",
name: "(MERCK) MK-3475-564 / KEYNOTE-564",
lName: "MK-3475-564 -A Phase III, Randomized, Double-Blind, Placebo-Controlled Clinical Trial of Pembrolizumab (MK-3475) as Monotherapy in the Adjuvant Treatment of Renal Cell Carcinoma Post Nephrectomy (KEYNOTE-564)",
date: 1 / 11 / 2018,
recuted: 4,
target: 5,
perc: 80,
gov: "NCT03142334"
},
{
value: "D",
site: "Open to recruitment",
dR: "Yeung, Dr Carrie",
body: "Genito-Urinary",
rN: " Cooper, Ms Divina",
name: "(ROCHE) CO39303",
lName: "A Phase III, randomized, double-build, placebo-controlled, multicenter trial testing Ipatasertib plus Abiraterone plus Prednisone/Prednisolone, relative to Placebo plus Abiraterone plus Prednisone/Prednisolone in adult male patients with asymptomatic or mildly symptomatic, previously untreated, metastatic castrate-resistant prostate cancer",
date: 7 / 20 / 2017,
recuted: 7,
target: 5,
perc: 140,
gov: "NCT03072238"
},
{
value: "E",
site: "Open to recruitment",
dR: "Zalewski, Dr Pawel",
body: "Genito-Urinary",
rN: "Lauzon, Ms Lynn",
name: "(BMS) CA018005/CA018005A",
lName: "A Phase 2, Real-time Assessment of Combination Therapies in Immuno-Oncology Study in Participants With Advanced Renal Cell Carcinoma (FRACTION-RCC)",
date: 8 / 14 / 2017,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT02996110"
},
{
value: "F",
site: "Open to recruitment",
dR: "Zalewski, Dr Pawel",
body: "Genito-Urinary",
rN: "Lauzon, Ms Lynn",
name: "(ROCHE) WO29636 / IMVIGOR 010",
lName: "A Phase III, Open-Label, Multicenter, Randomized Study of Atezolizumab (Anti-PD-L1 Antibody) Versus Observation as Adjuvant Therapy in Patients With PD-L1-Selected, High-Risk Muscle-Invasive Bladder Cancer After Cystectomy",
date: 10 / 20 / 2015,
recuted: 3,
target: 5,
perc: 60,
gov: "NCT02450331"
},
{
value: "G",
site: "Open to recruitment",
dR: "Zalewski, Dr Pawel",
body: "Genito-Urinary",
rN: "Lauzon, Ms Lynn",
name: "(ROCHE) WO30070",
lName: "A Phase III, Multicenter, Randomized, Placebo-Controlled, Double-Blind Study of Atezolizumab (Anti PD-L1 Antibody) in Combination With Gemcitabine/Carboplatin Versus Gemcitabine/Carboplatin Alone in Patients With Untreated Locally Advanced or Metastatic Urothelial Carcinoma Who Are Ineligible For Cisplatin-Based Therapy [IMvigor130]",
date: 9 / 5 / 2017,
recuted: 4,
target: 6,
perc: 66.67,
gov: "NCT02807636"
},
{
value: "H",
site: "Open to recruitment",
dR: "Lo, Dr Gregory",
body: "Lung",
rN: "Lauzon, Ms Lynn",
name: "(PHARMAMAR) PM1183-C-003-14 / ATLANTIS",
lName: "Phase III Randomized Clinical Trial of Lurbinectedin (PM01183)/Doxorubicin (DOX) Versus Cyclophosphamide (CTX), Doxorubicin (DOX) and Vincristine (VCR) (CAV) or Topotecan as Treatment in Patients With Small-Cell Lung Cancer (SCLC) Who Failed One Prior Platinum-containing Line (ATLANTIS Trial)",
date: 11 / 23 / 2016,
recuted: 5,
target: 5,
perc: 100,
gov: "NCT02566993"
},
{
value: "I",
site: "Open to recruitment",
dR: "Rothenstein, Dr Jeffrey",
body: "Lung",
rN: " Mastin, Ms Samantha",
name: "(ROCHE) BO29554 / BFAST",
lName: "A Phase II/III Multicenter Study Evaluating the Efficacy and Safety of Multiple Targeted Therapies as Treatments for Patients With Advanced or Metastatic Non-Small Cell Lung Cancer (NSCLC) Harboring Actionable Somatic Mutations Detected in Blood (B-FAST: Blood-First Assay Screening Trial)",
date: 1 / 19 / 2018,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT03178552"
},
{
value: "J",
site: "Open to recruitment",
dR: "Rothenstein, Dr Jeffrey",
body: "Lung",
rN: "Papaleo, Ms Marianna",
name: "(BMS) CA209-907",
lName: "An Open-label, Single-arm Phase II Safety Study of Nivolumab in Participants with Advanced or Metastatic Non-small Cell Lung Cancer Who Have Progressed During or After Receiving at Least One Prior Systemic Regimen CA209-907",
date: 6 / 7 / 2017,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT03090737"
},
{
value: "K",
site: "Open to recruitment",
dR: "Rothenstein, Dr Jeffrey",
body: "Lung",
rN: "Papaleo, Ms Marianna",
name: "(CCTG) BR.31",
lName: "A Phase III Prospective Double Blind Placebo Controlled Randomized Study of Adjuvant MEDI4736 In Completely Resected Non-Small Cell Lung Cancer",
date: 1 / 8 / 2015,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT02273375"
},
{
value: "L",
site: "Open to recruitment",
dR: "Koneru, Dr Rama",
body: "Other",
rN: "Cecchetto, Ms Tammy",
name: "(UOT) The 5C Study",
lName: "Comprehensive Geriatric Assessment and Management for Canadian Elders With Cancer",
date: 4 / 6 / 2018,
recuted: 4,
target: 25,
perc: 16,
gov: "TBD"
},
{
value: "M",
site: "Project site in setup",
dR: "Rothenstein, Dr Jeffrey",
body: "Other",
rN: "Cecchetto, Ms Tammy",
name: "Study 1",
lName: "Study 1",
date: "",
recuted: 0,
target: "TBD",
perc: 0,
gov: "TDB"
},
{
value: "N",
site: "Project site in setup",
dR: "Freedman, Dr Orit",
body: "Breast",
rN: "C Mueller, Ms Ann",
name: "Study 2",
lName: "Study 2",
date: "",
recuted: 0,
target: "TBD",
perc: 0,
gov: "TDB"
},
{
value: "O",
site: "Project site in setup",
dR: "Lo, Dr Gregory",
body: "Genito-Urinary",
rN: "Lauzon, Ms Lynn",
name: "Study 3",
lName: "Study 3",
date: "",
recuted: 0,
target: 6,
perc: 0,
gov: "TDB"
},
{
value: "P",
site: "Project site in setup",
dR: "Yeung, Dr Carrie",
body: "Genito-Urinary",
rN: "Papaleo, Ms Marianna",
name: "Study 4",
lName: "Study 4",
date: "",
recuted: 0,
target: 4,
perc: 0,
gov: "TDB"
},
{
value: "Q",
site: "Project site in setup",
dR: "Zalewski, Dr Pawel",
body: "Genito-Urinary",
rN: "Cooper, Ms Divina",
name: "Study 5",
lName: "Study 5",
date: "",
recuted: 0,
target: "TBD",
perc: 0,
gov: "TDB"
},
{
value: "R",
site: "Project site in setup",
dR: "Naassan, Dr Anthony",
body: "Hematology",
rN: "C Mastin, Ms Samantha",
name: "Study 6",
lName: "Study 6",
date: "",
recuted: 0,
target: "TBD",
perc: 0,
gov: "TDB"
},
{
value: "S",
site: "Project site in setup",
dR: "Schattner, Dr Ariah",
body: "Hematology",
rN: "Mueller, Ms Ann",
name: "Study 7",
lName: "Study 7",
date: "",
recuted: 0,
target: 8,
perc: 0,
gov: "TDB"
},
{
value: "T",
site: "Project site in setup",
dR: "Schattner, Dr Ariah",
body: "Hematology",
rN: "Papaleo, Ms Marianna",
name: "Study 8",
lName: "Study 8",
date: "",
recuted: 0,
target: 7,
perc: 0,
gov: "TDB"
},
{
value: "U",
site: "Project site in setup",
dR: "Lo, Dr Gregory",
body: "Lung",
rN: "TBD",
name: "Study 9",
lName: "Study 9",
date: "",
recuted: 0,
target: 3,
perc: 0,
gov: "TDB"
},
{
value: "V",
site: "Project site in setup",
dR: "Rothenstein, Dr Jeffrey",
body: "Lung",
rN: " Mueller, Ms Ann",
name: "Study 10",
lName: "Study 10",
date: "",
recuted: 0,
target: 5,
perc: 0,
gov: "TDB"
},
];
var height = 800,
width = 800;
var svg = d3.select("svg").attr('height', height).attr('width', width);
var max_words = d3.max(datapoints, function (d) {
return d['name'];
});
var x_scale = d3.scaleLinear().domain([1800, 2015]).range([0, width]);
var y_scale = d3.scaleLinear().domain([0, 500000]).range([height, 0]);
svg.selectAll('circle')
.data(datapoints)
.enter()
.append('circle')
.attr('r', 10)
.attr('cx', function (d) {
return x_scale(d['published'])
})
.attr('cy', function (d) {
return y_scale(d['name'])
})
.on('mouseover', function (d, i) {
// Select the element by class, use .text to set the content
d3.select(".infobox .lName").text(d['lName']);
d3.select(".infobox .dR").text(d['dR']);
d3.select(".infobox .rN").text(d['rN']);
d3.select(".infobox .name").text(d['name']);
// Show the infobox
d3.select(".infobox").style('visibility', 'visible');
// make the mouseover'd element
// bigger and red
d3.select(this)
.transition()
.duration(100)
.attr('r', 20)
.attr('fill', '#ff0000');
})
.on('mouseout', function (d, i) {
// Hide the infobox
d3.select(".infobox").style('visibility', 'hidden');
// return the mouseover'd element
// to being smaller and black
d3.select(this)
.transition()
.duration(100)
.attr('r', 10)
.attr('fill', '#000000');
})
};
答案 0 :(得分：0)
不是一个真正的答案，但我认为我会发布代码，因为它可能会帮助您了解问题所在。问题在于功能
.attr('cx', function (d) {
return x_scale(d['published'])
})
.attr('cy', function (d) {
return y_scale(d['name'])
})
不返回数字。因为published中没有定义datapoints，并且name是不能强制转换为数字的字符串。我不清楚代码的目的是什么（意思是您打算使用什么数字），但是通过在预期范围内插入随机数，您至少可以看到代码有效……
希望这对您有所帮助：
window.onload = function () {
'use strict';
// dimensions of the svg container
const SVG_HEIGHT = 875;
const SVG_WIDTH = 800;
// size multiplier
const SIZE_MULTIPLIER = 1.5;
var datapoints = [
{
value: "A",
site: "Open to recruitment",
dR: "Freedman Dr Orit",
body: "breast",
rN: "Mueller, Ms Ann",
name: "(MACRO GENICS) CP-MGAH22-04 / SOPHIA",
lName: "A Phase 3, Randomized Study of Margetuximab Plus Chemotherapy vs Trastuzumab Plus Chemotherapy in the Treatment of Patients With HER2+ Metastatic Breast Cancer Who Have Received Prior Anti-HER2 Therapies and Require Systemic Treatment",
date: 3 / 18 / 2016,
recuted: 3,
target: 5,
perc: 60,
gov: "NCT02492711"
},
{
value: "B",
site: "Open to recruitment",
dR: "Shim, Dr Kathy",
body: "Gastrointestinal",
rN: " Papaleo, Ms Marianna ",
name: "(CCTG) CRC.7",
lName: "A Phase II/III Trial of Neoadjuvant FOLFOX, With Selective Use of Combined Modality Chemoradiation Versus Preoperative Combined Modality Chemoradiation for Locally Advanced Rectal Cancer Patients Undergoing Low Anterior Resection With Total Mesorectal Excision",
date: 3 / 29 / 2016,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT01515787"
},
{
value: "C",
site: "Open to recruitment",
dR: "Lo, Dr Gregory",
body: "Genito-Urinary",
rN: " Cecchetto, Ms Tammy",
name: "(MERCK) MK-3475-564 / KEYNOTE-564",
lName: "MK-3475-564 -A Phase III, Randomized, Double-Blind, Placebo-Controlled Clinical Trial of Pembrolizumab (MK-3475) as Monotherapy in the Adjuvant Treatment of Renal Cell Carcinoma Post Nephrectomy (KEYNOTE-564)",
date: 1 / 11 / 2018,
recuted: 4,
target: 5,
perc: 80,
gov: "NCT03142334"
},
{
value: "D",
site: "Open to recruitment",
dR: "Yeung, Dr Carrie",
body: "Genito-Urinary",
rN: " Cooper, Ms Divina",
name: "(ROCHE) CO39303",
lName: "A Phase III, randomized, double-build, placebo-controlled, multicenter trial testing Ipatasertib plus Abiraterone plus Prednisone/Prednisolone, relative to Placebo plus Abiraterone plus Prednisone/Prednisolone in adult male patients with asymptomatic or mildly symptomatic, previously untreated, metastatic castrate-resistant prostate cancer",
date: 7 / 20 / 2017,
recuted: 7,
target: 5,
perc: 140,
gov: "NCT03072238"
},
{
value: "E",
site: "Open to recruitment",
dR: "Zalewski, Dr Pawel",
body: "Genito-Urinary",
rN: "Lauzon, Ms Lynn",
name: "(BMS) CA018005/CA018005A",
lName: "A Phase 2, Real-time Assessment of Combination Therapies in Immuno-Oncology Study in Participants With Advanced Renal Cell Carcinoma (FRACTION-RCC)",
date: 8 / 14 / 2017,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT02996110"
},
{
value: "F",
site: "Open to recruitment",
dR: "Zalewski, Dr Pawel",
body: "Genito-Urinary",
rN: "Lauzon, Ms Lynn",
name: "(ROCHE) WO29636 / IMVIGOR 010",
lName: "A Phase III, Open-Label, Multicenter, Randomized Study of Atezolizumab (Anti-PD-L1 Antibody) Versus Observation as Adjuvant Therapy in Patients With PD-L1-Selected, High-Risk Muscle-Invasive Bladder Cancer After Cystectomy",
date: 10 / 20 / 2015,
recuted: 3,
target: 5,
perc: 60,
gov: "NCT02450331"
},
{
value: "G",
site: "Open to recruitment",
dR: "Zalewski, Dr Pawel",
body: "Genito-Urinary",
rN: "Lauzon, Ms Lynn",
name: "(ROCHE) WO30070",
lName: "A Phase III, Multicenter, Randomized, Placebo-Controlled, Double-Blind Study of Atezolizumab (Anti PD-L1 Antibody) in Combination With Gemcitabine/Carboplatin Versus Gemcitabine/Carboplatin Alone in Patients With Untreated Locally Advanced or Metastatic Urothelial Carcinoma Who Are Ineligible For Cisplatin-Based Therapy [IMvigor130]",
date: 9 / 5 / 2017,
recuted: 4,
target: 6,
perc: 66.67,
gov: "NCT02807636"
},
{
value: "H",
site: "Open to recruitment",
dR: "Lo, Dr Gregory",
body: "Lung",
rN: "Lauzon, Ms Lynn",
name: "(PHARMAMAR) PM1183-C-003-14 / ATLANTIS",
lName: "Phase III Randomized Clinical Trial of Lurbinectedin (PM01183)/Doxorubicin (DOX) Versus Cyclophosphamide (CTX), Doxorubicin (DOX) and Vincristine (VCR) (CAV) or Topotecan as Treatment in Patients With Small-Cell Lung Cancer (SCLC) Who Failed One Prior Platinum-containing Line (ATLANTIS Trial)",
date: 11 / 23 / 2016,
recuted: 5,
target: 5,
perc: 100,
gov: "NCT02566993"
},
{
value: "I",
site: "Open to recruitment",
dR: "Rothenstein, Dr Jeffrey",
body: "Lung",
rN: " Mastin, Ms Samantha",
name: "(ROCHE) BO29554 / BFAST",
lName: "A Phase II/III Multicenter Study Evaluating the Efficacy and Safety of Multiple Targeted Therapies as Treatments for Patients With Advanced or Metastatic Non-Small Cell Lung Cancer (NSCLC) Harboring Actionable Somatic Mutations Detected in Blood (B-FAST: Blood-First Assay Screening Trial)",
date: 1 / 19 / 2018,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT03178552"
},
{
value: "J",
site: "Open to recruitment",
dR: "Rothenstein, Dr Jeffrey",
body: "Lung",
rN: "Papaleo, Ms Marianna",
name: "(BMS) CA209-907",
lName: "An Open-label, Single-arm Phase II Safety Study of Nivolumab in Participants with Advanced or Metastatic Non-small Cell Lung Cancer Who Have Progressed During or After Receiving at Least One Prior Systemic Regimen CA209-907",
date: 6 / 7 / 2017,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT03090737"
},
{
value: "K",
site: "Open to recruitment",
dR: "Rothenstein, Dr Jeffrey",
body: "Lung",
rN: "Papaleo, Ms Marianna",
name: "(CCTG) BR.31",
lName: "A Phase III Prospective Double Blind Placebo Controlled Randomized Study of Adjuvant MEDI4736 In Completely Resected Non-Small Cell Lung Cancer",
date: 1 / 8 / 2015,
recuted: 2,
target: 5,
perc: 40,
gov: "NCT02273375"
},
{
value: "L",
site: "Open to recruitment",
dR: "Koneru, Dr Rama",
body: "Other",
rN: "Cecchetto, Ms Tammy",
name: "(UOT) The 5C Study",
lName: "Comprehensive Geriatric Assessment and Management for Canadian Elders With Cancer",
date: 4 / 6 / 2018,
recuted: 4,
target: 25,
perc: 16,
gov: "TBD"
},
{
value: "M",
site: "Project site in setup",
dR: "Rothenstein, Dr Jeffrey",
body: "Other",
rN: "Cecchetto, Ms Tammy",
name: "Study 1",
lName: "Study 1",
date: "",
recuted: 0,
target: "TBD",
perc: 0,
gov: "TDB"
},
{
value: "N",
site: "Project site in setup",
dR: "Freedman, Dr Orit",
body: "Breast",
rN: "C Mueller, Ms Ann",
name: "Study 2",
lName: "Study 2",
date: "",
recuted: 0,
target: "TBD",
perc: 0,
gov: "TDB"
},
{
value: "O",
site: "Project site in setup",
dR: "Lo, Dr Gregory",
body: "Genito-Urinary",
rN: "Lauzon, Ms Lynn",
name: "Study 3",
lName: "Study 3",
date: "",
recuted: 0,
target: 6,
perc: 0,
gov: "TDB"
},
{
value: "P",
site: "Project site in setup",
dR: "Yeung, Dr Carrie",
body: "Genito-Urinary",
rN: "Papaleo, Ms Marianna",
name: "Study 4",
lName: "Study 4",
date: "",
recuted: 0,
target: 4,
perc: 0,
gov: "TDB"
},
{
value: "Q",
site: "Project site in setup",
dR: "Zalewski, Dr Pawel",
body: "Genito-Urinary",
rN: "Cooper, Ms Divina",
name: "Study 5",
lName: "Study 5",
date: "",
recuted: 0,
target: "TBD",
perc: 0,
gov: "TDB"
},
{
value: "R",
site: "Project site in setup",
dR: "Naassan, Dr Anthony",
body: "Hematology",
rN: "C Mastin, Ms Samantha",
name: "Study 6",
lName: "Study 6",
date: "",
recuted: 0,
target: "TBD",
perc: 0,
gov: "TDB"
},
{
value: "S",
site: "Project site in setup",
dR: "Schattner, Dr Ariah",
body: "Hematology",
rN: "Mueller, Ms Ann",
name: "Study 7",
lName: "Study 7",
date: "",
recuted: 0,
target: 8,
perc: 0,
gov: "TDB"
},
{
value: "T",
site: "Project site in setup",
dR: "Schattner, Dr Ariah",
body: "Hematology",
rN: "Papaleo, Ms Marianna",
name: "Study 8",
lName: "Study 8",
date: "",
recuted: 0,
target: 7,
perc: 0,
gov: "TDB"
},
{
value: "U",
site: "Project site in setup",
dR: "Lo, Dr Gregory",
body: "Lung",
rN: "TBD",
name: "Study 9",
lName: "Study 9",
date: "",
recuted: 0,
target: 3,
perc: 0,
gov: "TDB"
},
{
value: "V",
site: "Project site in setup",
dR: "Rothenstein, Dr Jeffrey",
body: "Lung",
rN: " Mueller, Ms Ann",
name: "Study 10",
lName: "Study 10",
date: "",
recuted: 0,
target: 5,
perc: 0,
gov: "TDB"
},
];
var height = 800,
width = 800;
var svg = d3.select("svg").attr('height', height).attr('width', width);
var max_words = d3.max(datapoints, function (d) {
return d['name'];
});
var x_scale = d3.scaleLinear().domain([1800, 2015]).range([0, width]);
var y_scale = d3.scaleLinear().domain([0, 500000]).range([height, 0]);
var xoffset = 20, yoffset = 100;
svg.selectAll('circle')
.data(datapoints)
.enter()
.append('circle')
.attr('r', 10)
.attr('cx', function (d) {
return x_scale(1800 + Math.random() * 215);
//return x_scale(d['published']) <- undefined
})
.attr('cy', function (d) {
return y_scale(Math.random() * 500000);
//return y_scale(d['name']) <- String
})
.on('mouseover', function (d, i) {
// Select the element by class, use .text to set the content
d3.select(".infobox .lName").text(d['lName']);
d3.select(".infobox .dR").text(d['dR']);
d3.select(".infobox .rN").text(d['rN']);
d3.select(".infobox .name").text(d['name']);
// Show the infobox
d3.select(".infobox").style('visibility', 'visible');
// make the mouseover'd element
// bigger and red
d3.select(this)
.transition()
.duration(100)
.attr('r', 20)
.attr('fill', '#ff0000');
})
.on('mouseout', function (d, i) {
// Hide the infobox
d3.select(".infobox").style('visibility', 'hidden');
// return the mouseover'd element
// to being smaller and black
d3.select(this)
.transition()
.duration(100)
.attr('r', 10)
.attr('fill', '#000000');
})
};<!DOCTYPE html>
<html>
<head>
<title>Assignment 3 - web application
</title>
<meta charset="utf-8" />
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h2 id="ttl">CWD 3500 - ASSIGNMENT 03 - USING FUNCTIONS</h2>
<div class="infobox" style="visibility: hidden;">
<h3 class="lName">Book Title</h3>
<h4 class="dR">Book Author</h4>
<p>Published in: <strong class="rN">year</strong></p>
<p>Word count: <strong class="name">published</strong></p>
</div>
<svg></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
</body>