Why is constructor function not setting <h6> text correctly?

LearningD3 :

I am using OOP principles to create a bunch of graphs. Everything works fine except the setting of text values. I need to set the title of each graph but instead I am getting blank values.

My code: The controller file, i.e. main.js does all the data manipulation and creates new graphs by invoking the constructor function (stored in mainSlopeGraph.js) with arguments that include the id of <h6> element and text to fill it with.

Relevant code:

<div class="col-sm-4 descGraph">
        <h6 id="provinceNameBaloch"></h6>
        <h6 id="provinceNameICT"></h6>
        <h6 id="provinceNamePunjab"></h6>
        <h6 id="provinceNameSindh"></h6>
        <h6 id="provinceNameKPK"></h6>
        <p>Add some words talking about the trend.</p>
      </div>

main.js:

slopeGraphKPK = new SlopeGraph(
    "#chart1",
    updatedKPKData,
    dataKPKDomain,
    "#provNameKPK",
    provNameKPK
  );
  slopeGraphPunjab = new SlopeGraph(
    "#chart2",
    updatedPunjabData,
    dataPunjabDomain,
    "#provNamePunjab",
    provNamePunjab
  );
  slopeGraphICT = new SlopeGraph(
    "#chart3",
    updatedICTData,
    dataICTDomain,
    "#provNameICT",
    provNameICT
  );
  slopeGraphSindh = new SlopeGraph(
    "#chart4",
    updatedSindhData,
    dataSindhDomain,
    "#provNameSindh",
    provNameSindh
  );
  slopeGraphBaloch = new SlopeGraph(
    "#chart5",
    updatedBalochData,
    dataBalochDomain,
    "#provNameBaloch",
    provNameBaloch
  );

mainSlopeGraph.js:

  SlopeGraph = function(
  _parentElement,
  _someData,
  _someDomain,
  _provNamePlaceholder,
  _provName
) {
  this.parentElement = _parentElement;
  this.provData = _someData;
  this.scaleDomain = _someDomain;
  this.provNamePlaceholder = _provNamePlaceholder;
  this.provName = _provName;
  this.initVis();
};

SlopeGraph.prototype.initVis = function() {
  let vis = this;

  console.log(vis.provNamePlaceholder);
  console.log(vis.provName);


  $(vis.provNamePlaceholder).text(vis.provName);
  // $("#provinceName").textContent = vis.provName;
  // $("#provinceName").innerText = vis.provName;
  // $("#provinceName").innerHTML = vis.provName;
.
.
.
}

In case, here is all the code: https://github.com/SabahatPK/Data4Pakistan_SlopeGraphs And this is output: https://data-driven-pakistan-data-stories.netlify.com/

Max :

In your HTML you use provinceNameKPK and alike, in your js however you use provNameKPK. So

slopeGraphKPK = new SlopeGraph(
    "#chart1",
    updatedKPKData,
    dataKPKDomain,
    "#provNameKPK",
    provNameKPK
  );

must be

slopeGraphKPK = new SlopeGraph(
    "#chart1",
    updatedKPKData,
    dataKPKDomain,
    "#provinceNameKPK", // prov => province
    provNameKPK
  );

and so on

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=302472&siteId=1