d3.选择不追加

d3.select do not append

本文关键字：追加 选择 d3      更新时间：2023-09-26

我不是Web开发人员，我尝试使用d3js。我对 d3.select 有问题。我试图显示"p_total"的结果，但这不起作用。

我使用模板来测试我的代码及其工作精细，除了 d3.select 方法。

请看下面的代码：

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8">
<meta content="UTF-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/keen-dashboards.css" />
</head>
<body class="application">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="../">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="navbar-brand" href="./">Domosint </a>
</div>
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
    <li><a href="https://keen.io">Home</a></li>
    <li><a href="https://keen.io/team">Team</a></li>
    <li><a href="https://github.com/keenlabs/dashboards/tree/gh-pages/examples/starter-kit">Source</a></li>
    <li><a href="https://groups.google.com/forum/#!forum/keen-io-devs">Community</a></li><li><a href="http://stackoverflow.com/questions/tagged/keen-io?sort=newest&pageSize=15">Technical Support</a></li>
  </ul>
</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
<div class="col-sm-8">
  <div class="chart-wrapper">
    <div class="chart-title">
      Pageviews by browser (past 24 hours)
    </div>
    <div class="chart-stage">
      <div id="chart-01"></div>
    </div>
    <div class="chart-notes">
      This is a sample text region to describe this chart.
    </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="chart-wrapper">
    <div class="chart-title">
      distribution
    </div>
    <div class="chart-stage">
      <div id="viz"></div>
    </div>
    <div class="chart-notes">
      Total: <div id="sum_p"></div>
    </div>
  </div>
</div>
  </div>

  <div class="row">
<div class="col-sm-4">
  <div class="chart-wrapper">
    <div class="chart-title">
      Impressions by advertiser
    </div>
    <div class="chart-stage">
      <div id="chart-03"></div>
    </div>
    <div class="chart-notes">
      Notes go down here
    </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="chart-wrapper">
    <div class="chart-title">
      Impressions by device
    </div>
    <div class="chart-stage">
      <div id="chart-04"></div>
    </div>
    <div class="chart-notes">
      Notes go down here
    </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="chart-wrapper">
    <div class="chart-title">
      Impressions by country
    </div>
    <div class="chart-stage">
      <div id="chart-05"></div>
    </div>
    <div class="chart-notes">
      Notes go down here
    </div>
  </div>
</div>
  </div>
  <div class="row">
<div class="col-sm-3">
  <div class="chart-wrapper">
    <img data-src="holder.js/100%x150/white">
  </div>
</div>
<div class="col-sm-3">
  <div class="chart-wrapper">
    <img data-src="holder.js/100%x150/white">
  </div>
</div>
<div class="col-sm-3">
  <div class="chart-wrapper">
    <img data-src="holder.js/100%x150/white">
  </div>
</div>
<div class="col-sm-3">
  <div class="chart-wrapper">
    <img data-src="holder.js/100%x150/white">
  </div>
</div>
  </div>
  <hr>
  <p class="small text-muted">Built with &#9829; by <a href="https://keen.io">Keen IO</a></p>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/holder.js" charset="utf-8"></script>
<script>
Holder.add_theme("white", { background:"#fff", foreground:"#a7a7a7", size:10 });
</script>
<script type="text/javascript" src="js/keen.min.js"></script>
<script type="text/javascript" src="js/meta.js"></script>
<script type="text/javascript" src="js/keen.dashboard.js"></script>
<script type="text/javascript" src="js/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="js/d3plus.js" charset="utf-8"></script>
<script>
var p_distribution = new Array();
var p_total = 0;
d3.json("data/file.json", function(error, data) {
  for (var key in data) {
ps = data[key]["info"];
for (var p in ps) {
  p_total = p_total + 1;
  flag = 0;
  size = data.length;
  for (var cnt = 0; cnt < size; cnt++) {
    if (p_distribution[cnt]["p"] == p) {
      p_distribution[cnt]["value"] = p_distribution[cnt]["value"] + 1;
      flag = 1;
    }
  }
  if (flag == 0) {
    p_distribution.push({"p":p, "value":1, "name":p});
  }
}
  }
  alert(p_total);
  d3.select('#sum_p').append(p_total);
});
var visualization = d3plus.viz()
  .container("#viz")
  .data(p_distribution)
  .type("tree_map")
  .id("name")
  .size("value")
  .height(250)
  .width(400)
  .draw()
</script>

谢谢

变量p_total是一个整数。 D3 的追加将要追加到所选元素的元素的名称作为其参数。所以，按你来称呼它：

d3.select('#sum_p').append(p_total);

真的没有意义。假设p_total等于 3，那么您正在做的是尝试将 <3> 元素插入到文档中。

看起来您只想更改元素的文本内容，因此您希望改用文本：

d3.select('#sum_p').text(p_total);
相关文章：