Javascript 数据对象内部的D3循环数组
我试图为每个对象的每一天创建一个矩形, 下面没有“for”的代码正在工作并为第[0]天创建一个矩形,但不是所有的天都工作Javascript 数据对象内部的D3循环数组,javascript,svg,d3.js,Javascript,Svg,D3.js,我试图为每个对象的每一天创建一个矩形, 下面没有“for”的代码正在工作并为第[0]天创建一个矩形,但不是所有的天都工作 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], "sta
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"}]
函数标记课程(数据)
{
var coursesGroup=cont.append(“g”);
对于(var x=0;x,在使用D3时,您永远不需要编写任何循环构造
这里有一个简单的嵌套结构
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);
}
}
您可以在这里阅读有关嵌套选择的内容:如果d是一个整数,它如何包含诸如d.x_位置之类的字段?“函数(d)…”中的“d”是当前对象,由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