d3.select不附加

Question

我不是網絡開發人員，請嘗試使用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>

謝謝

Answer 1

您的變量p_total是一個整數。 d3的append將要添加到所選元素的元素名稱作為其參數。 因此，按原樣調用它：

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

沒有任何意義。 假設p_total等於3，那么您正在嘗試在文檔中插入<3>元素。

看起來您只想更改元素的文本內容，所以您想使用text ：

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

d3.select不附加

問題描述

1 個解決方案

解決方案1
2 2015-03-07 04:24:48

d3.select不附加

問題描述

1 個解決方案

解決方案1 2 2015-03-07 04:24:48

解決方案1
2 2015-03-07 04:24:48