d3.select不附加

Question

I'm not a web developer and I try yo use d3js. 我不是网络开发人员，请尝试使用d3js。 I have an issue with d3.select. 我的d3.select有问题。 I tried to display the results from "p_total" at but this do not work. 我试图显示“ p_total”处的结果，但这不起作用。

I use a template to test my code and its workng fine except, for d3.select method. 除了d3.select方法，我使用模板来测试我的代码及其工作效果。

PLease see below the code: 请看下面的代码：

<!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>

Thanks 谢谢

Answer 1

Your variable p_total is an integer. 您的变量p_total是一个整数。 d3's append takes as its argument the name of an element to append to the selected element. d3的append将要添加到所选元素的元素名称作为其参数。 So, calling it as you are: 因此，按原样调用它：

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

doesn't really make sense. 没有任何意义。 Say p_total equals 3, then what you're doing is trying to insert a <3> element into the document. 假设p_total等于3，那么您正在尝试在文档中插入<3>元素。

It looks like you want to just change the text content of the element, so you want to instead use text : 看起来您只想更改元素的文本内容，所以您想使用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