数据对象内的 D3 循环数组
D3 loop array inside data object
data = [
{"name":"c1","id":4690 ,"day":[1,3], "start":"8:00", "end":"10:00"},
{"name":"c3","id":5283 ,"day":[3,4], "start":"8:00", "end":"17:00"},
{"name":"c4","id":4862 ,"day":[4], "start":"10:00", "end":"12:30"},
{"name":"c5","id":4862 ,"day":[5], "start":"10:00", "end":"12:30"}]
我正在尝试为每个对象的每一天创建一个矩形,以下没有"for"的代码正在工作并为 day[0] 创建一个矩形,但不是所有的日子都有效!!
function markCourses( data)
{
var coursesGroup = cont.append("g");
for ( var x=0; x<data[this].day.length; x++)
{
var rects = coursesGroup.selectAll("rect").data(data).enter().append("rect")
.attr("x",function(d){ return d.x_position;})
.attr("y", function(d){ return d.y_position;})
.attr("width", function(d){ return d.duration;})
.attr("height", vSize-6) // the -6 is used here is used for improvement of the interface
.style("fill",function(d){return d.color;}) . style("opacity",0.6);
}
}
使用 D3 时,永远不需要编写任何循环构造。
您在这里拥有的是一个简单的嵌套结构。
svg.selectAll('g.dataObject')
.data(data)
.enter()
.append('g')
.attr('foo', function (d) {
// here d is {"name":"c1","id":4 ... } then {"name":"c2" ... } etc
})
// let's create a subselection
.selectAll('rect')
.data(function (d) { return d.day; })
.enter()
.append('rect')
.attr(function (d) {
// here d is 1, then 3 for data object with name c1
})... etc
您可以在此处阅读有关嵌套选择的信息:http://bost.ocks.org/mike/nest/
相关文章:
- 如何将angularjs中的javascript字符串输出为循环数组
- 如何从某个位置顺时针和逆时针循环数组
- 赢得't循环数组javascript
- 通过循环数组内容
- 使用RegExp循环数组而不是for循环(Javascript)
- 如何在背景图像的循环数组中预加载图像
- 如何在循环数组内部推送变量值
- Javascript循环数组无限不起作用
- 如何循环数组
- 如何使用Handlebars循环数组对象和模板
- PHP同时循环数组数据显示到javascript中
- 如何使用上一个/下一个功能循环数组中的图像
- 如何循环数组并保持它们之间的索引增长
- Javascript循环数组以查找可被3整除的数字
- 以变量作为属性的循环数组
- 嵌套的“for”循环 - 数组未定义
- 在具有主干和车把的模型中循环数组
- 数组在 for 循环与第二个 for 循环数组 JavaScript 合并
- 对于javascript和jquery的循环数组问题
- 在循环数组 javascript 后替换对象属性值中的字符串