为什么d在我的d3脚本中显示为未定义

Question

编辑为包含定义单元格的代码

我正试图创建一个从XHR请求中提取数据的图表，但在我的脚本中的某些函数中，d是未定义的：

var svg = d3.select("svg"),
margin = {top: 30, right: 40, bottom: 60, left: 40},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom;
var formatValue = d3.format(",d");

var x = d3.scaleTime()
//var x = d3.scaleLinear()
.domain([new Date(2017, 0, 1), new Date(2020, 11, 31)])
//.rangeRound([0, width]);
.range([0, width-300]);
/*var xScale = d3.scaleTime()
.domain([new Date(2018, 0, 1), new Date(2020, 11, 31)])
.range([50, 1150]);*/
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//variables for legends
var legendRectSize = 18;
var legendSpacing = 4;

d3.request("https://api.parliament.uk/sparql?query=PREFIX%20rdfs%3A%20%3Chttp%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%3E%0APREFIX%20%3A%20%3Chttps%3A%2F%2Fid.parliament.uk%2Fschema%2F%3E%0APREFIX%20id%3A%20%3Chttps%3A%2F%2Fid.parliament.uk%2F%3E%0Aselect%20%3FTreaty%20%3FTreatyname%20%3FLeadOrg%20%3FSeries%20%3FLink%20%3FworkPackage%20%3FprocStepName%20%3Fdate%20where%20%7B%0A%20%3FTreaty%20a%20%3ATreaty%20.%20%20%0A%20%20%20%20%20%3FTreaty%20rdfs%3Alabel%20%3FTreatyname%20.%0A%20%20OPTIONAL%7B%20%3FTreaty%20%3AtreatyHasLeadGovernmentOrganisation%2F%20rdfs%3Alabel%20%3FLeadOrg%20.%7D%20%0A%20%20OPTIONAL%20%7B%3FTreaty%20%3AtreatyHasSeriesMembership%2F%20%3AseriesItemCitation%20%3FSeries.%7D%0A%20%20OPTIONAL%20%7B%3FTreaty%20%3AworkPackagedThingHasWorkPackagedThingWebLink%20%3FLink.%7D%0A%09%3FTreaty%20%3AworkPackagedThingHasWorkPackage%20%3FworkPackage%20.%0A%20%20%09%3FworkPackage%20%3AworkPackageHasProcedure%2Frdfs%3Alabel%20%3Fproc%0A%20%20FILTER(%3Fproc%20IN%20(%22Treaties%20subject%20to%20the%20Constitutional%20Reform%20and%20Governance%20Act%202010%22))%0A%20%20%20%3FworkPackage%20%3AworkPackageHasBusinessItem%20%3FprocStep%20.%0A%20%20%20%20%20%3FprocStep%20%3AbusinessItemDate%20%3Fdate%20.%0A%20%20%3FprocStep%20%3AbusinessItemHasProcedureStep%20id%3Acspzmb6w%20.%0A%20%20%3FprocStep%20%3AbusinessItemHasProcedureStep%2Frdfs%3Alabel%20%3FprocStepName.%20%0A%20%20%20%20%0A%20%20%20%7D%0A")
.mimeType('application/sparql-results+json')
.response(function(xhr) { return JSON.parse(xhr.responseText); })
.get(function(data) {
console.log(data);
var data1 = data.results.bindings;
//if (error) alert(error);
data1.forEach(function(d){
d.datetrimmed = d.date.value.split('+')[0];
console.log(d.datetrimmed)
d.Date1 = Date.parse(d.datetrimmed)
console.log(d.Date1)
d.Date2 = d3.timeMonth(d.Date1)
console.log(d.Date2)
console.log(d.LeadOrg.value)
})
x.domain(d3.extent(data.results.bindings, function(d) { return d.Date2; }));
var myColor = d3.scaleOrdinal()
.range(['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', 'red', '#e6beff', '#9a6324', '#fffac8', '#800000']);
var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) { return x(d.Date2); }).strength(1))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(14))
.stop();
for (var i = 0; i < 120; ++i) simulation.tick();
g.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 5))
.attr("text-anchor", "middle")
.style("font-size", "24px")
.style("font-family", "Tahoma")
.style("text-decoration", "underline")
.style("fill", "#f2f0f7")
.text("All Treaties Subject to CRAG 2010 by Lead Organisation");
g.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top - 45))
.attr("text-anchor", "middle")
.style("font-size", "12px")
.style("font-family", "Tahoma")
.style("fill", "#f2f0f7")
.text("Click a point on the chart or hover over a square on the legend to highlight all treaties from a given department");
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(20));
g.append("text")
.attr("transform",
"translate(" + (width/2-100) + " ," +
(height + margin.top + 10) + ")")
.style("text-anchor", "middle")
.style("font-size", "14px")
.style("font-family", "Tahoma")
.style("fill", "#f2f0f7")
.text("Date the treaty was laid before the House of Commons");
var cell = g.append("g")
.attr("class", "cells")
.selectAll("g").data(d3.voronoi()
.extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]])
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.polygons(data1)).enter().append("g");

错误发生在中的这一点上，它说它无法读取未定义的属性数据：

cell.append("circle")
.attr("class", function(d){
console.log(d)
org = d.data.results.bindings.LeadOrg.value;
return org.replace(/[s,]/g,'') })

有没有一种方法可以让我在代码中进一步定义d？这部分代码仍然在d3.request函数的get请求中。这会引起问题吗？如有任何帮助，我们将不胜感激。

Answer 1

您从不将数据从cell传递到"circle"。要做到这一点，请考虑以下内容：

cell.append("circle")
.datum(function(d) { return d; })
.attr("class", function(d){
console.log(d)
org = d.data.results.bindings.LeadOrg.value;
return org.replace(/[s,]/g,'') })

这将获取指定给cell的对象d，并将其作为要指定给圆的数据对象返回。

注意，.datum与.data非常相关，只是它期望一个奇异值，而不是一个值数组。