На самом деле это не ответ, но я решил опубликовать код, так как, возможно, он поможет вам понять, в чем дело.Проблема в том, что функции
.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>