javascript - 为什么构造函数没有正确设置

Question

我正在使用 OOP 原则来创建一堆图表。除了文本值的设置之外，一切正常。我需要设置每个图表的标题，但我得到的是空白值。

我的代码: Controller 文件，即main.js通过使用包含 mainSlopeGraph.js 的参数调用构造函数(存储在 id 中)来执行所有数据操作并创建新图表。的<h6>元素和文本来填充它。

相关代码:

<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;
.
.
.
}

以防万一，这里是所有代码:https://github.com/SabahatPK/Data4Pakistan_SlopeGraphs这是输出:https://data-driven-pakistan-data-stories.netlify.com/

Answer 1

在 HTML 中，您使用 provinceNameKPK 等，在 js 中，您使用 provNameKPK。所以

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

必须是

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

等等