[英]How to display an array on text using d3?
I am using the Gridster
library, and I have a Gridster
box created: 我正在使用Gridster
库,并且创建了一个Gridster
框:
<li data-sizey="2" data-sizex="2" data-col="3" data-row="1">
<div class="gridster-box" id="box1">
<div class="handle-resize"></div>
</div>
</li>
In my JS
file I call a JSON
response from my back-end 在我的JS
文件中,我从后端调用JSON
响应
function createGraph() {
d3.json("/hours", function (data){
// Stuff here
}
}
The response, as shown in the console of the browser, is 如浏览器控制台中所示,响应为
Object {initial_hours: Array[19]}
initial_hours: Array[19]
Where the array contains: 数组包含的位置:
0: 1800
1: 1700
2: 1030
3: 1130
4: 950
5: 1249
6: 1225
7: 1821
8: 1250
9: 1505
10: 38
11: 130
12: 1520
13: 1600
14: 1330
15: 1930
16: 1806
17: 1535
18: 1855
length: 19
How do I print this array as a text in my Gridster
box? 如何在Gridster
框中将此数组打印为文本?
Your problem seems to primarily be a d3 problem, ie binding an array of data to some DOM element. 您的问题似乎主要是d3问题,即将数据数组绑定到某些DOM元素。 Below is a mock of your json data and how you can append its data to the DOM. 以下是json数据的模拟,以及如何将其数据附加到DOM。
I've broken array data list into 3 columns but you can play around with that by adjusting the x and y functions. 我将数组数据列表分为三列,但是您可以通过调整x和y函数来解决这个问题。
var svg = d3.select("svg");
var jsonResObj = {
initial_hours: [
1800, 1700, 1030, 1130, 950, 1249, 1225, 1821, 1250,
1505, 38, 130, 1520, 1600, 1330, 1930, 1806, 1535
]
};
var text = svg.selectAll('text')
.data(jsonResObj.initial_hours)
.enter().append('text')
.attr("x", function(d,i){return 100 * (i % 3)})
.attr("y", function(d,i){return 20 * ( Math.floor(i/3) ) })
.attr("fill", "#000")
.text(function(d){return d});
You should be able to do the same for gridster by selecting using the id or class eg 您应该能够通过使用id或class选择来对gridster做同样的事情,例如
var svg = d3.select("#box1");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.