我正在使用D3.js
在一行中绘制4列,我有三列数据,我想添加1列添加结尾。我的html
文件是这样的。
<div class="container">
<div class="feature">
<div class="row">
</div>
</div>
</div>
我的Javascript
代码就是这样。
function calculateNumber(){
var json_url = "...";
dataset = [];
d3.json(json_url, function(data) {
dataset.push(intToString(data[0]["num_jobs"]));
dataset.push(data[0]["cpuhour_tot"]);
dataset.push(data[0]["cpuhour_tot"]);
d3.select(".feature .row").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "col-xs-3")
.text(function(d){ return d});
});
new_data = generateStatic();
d3.select(".feature .row").selectAll("div")
.data(new_data)
.enter()
.append("div")
.attr("class", "col-xs-3")
.text(function(d){ return d});
}
此代码添加3列完美,现在new_data = generateStatic();
包含我要添加的新数据。
数据集和new_dat是不同的
现在我想添加另一个div ..但代码没有添加任何新的div,只需重写拳头。
我在图片中包含我必须出现新div的图片
有什么想法吗?
答案 0 :(得分:1)
如果您通过两个类名尝试select
,则需要删除类名和点.
之间的空格。
d3.select(".feature.row").selectAll("div")
在你的循环中,你会多次添加数据集,我不确定这是否是你打算做的。也许考虑一下
.data(dataset)
function calculateNumber() {
dataset = [
[1, 2, 1],
[3, 4, 3],
[5, 6, 5]
];
d3.select(".feature.row")
.data(dataset)
.enter()
.append("div")
.attr("class", "col-xs-3")
.text(function(d) {
return d
});
};
calculateNumber();
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<div class="container">
<div class="feature">
<div class="row">
<div class="col-xs-12 col-sm-3">
<div class="item_feature">
<h2>title </h2>
<div id="resume_data">
</div>
</div>
</div>
</div>
</div>
</div>
&#13;