Блог

отредактировано, чтобы включить код, в котором определена ячейка

Я пытаюсь создать диаграмму, которая извлекает данные из запроса 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 rdfs: 
PREFIX : 
PREFIX id: 
select ?Treaty ?Treatyname ?LeadOrg ?Series ?Link ?workPackage ?procStepName ?date where {
 ?Treaty a :Treaty .  
     ?Treaty rdfs:label ?Treatyname .
  OPTIONAL{ ?Treaty :treatyHasLeadGovernmentOrganisation/ rdfs:label ?LeadOrg .} 
  OPTIONAL {?Treaty :treatyHasSeriesMembership/ :seriesItemCitation ?Series.}
  OPTIONAL {?Treaty :workPackagedThingHasWorkPackagedThingWebLink ?Link.}
	?Treaty :workPackagedThingHasWorkPackage ?workPackage .
  	?workPackage :workPackageHasProcedure/rdfs:label ?proc
  FILTER(?proc IN ("Treaties subject to the Constitutional Reform and Governance Act 2010"))
   ?workPackage :workPackageHasBusinessItem ?procStep .
     ?procStep :businessItemDate ?date .
  ?procStep :businessItemHasProcedureStep id:cspzmb6w .
  ?procStep :businessItemHasProcedureStep/rdfs:label ?procStepName. 
    
   }
")
    .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");
  

Ошибка возникает на этом этапе далее, где говорится, что он не может прочитать данные свойства undefined:

 cell.append("circle")
     .attr("class", function(d){
       console.log(d)
       org = d.data.results.bindings.LeadOrg.value;

       return org.replace(/[s,]/g,'') })
  

Есть ли способ, которым я должен определять d дальше в коде?
Эта часть кода все еще находится в запросе get от функции d3.request . Это вызовет проблемы?
Буду признателен за любую помощь.

Вы никогда не передаете данные из 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,'') })
  

При этом берется объект d , которому вы присвоили cell , и возвращает его как объект данных, который также можно присвоить кругу.

Обратите внимание, что .datum это очень связано с .data , за исключением того, что он ожидает одно единственное значение, а не массив значений.