javascript - D3 loop array inside data object - Stack Overflow

admin管理员组

文章数量:1279176

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"}]

i'm trying to create a rectangle for each day of each object, the following code without the "for" is working and creating a rectangle for day[0], but not working for all the days!!

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);   
    }

}

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"}]

i'm trying to create a rectangle for each day of each object, the following code without the "for" is working and creating a rectangle for day[0], but not working for all the days!!

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);   
    }

}

• javascript
• svg
• d3.js

Share Improve this question Follow edited Jan 17, 2015 at 14:17 CommunityBot 111 silver badge asked Jan 17, 2015 at 13:31 M.TamimiM.Tamimi 39522 gold badges44 silver badges88 bronze badges 2

• 1 if d is an integer, how does it have fields such as d.x_position? – barej Commented Jan 17, 2015 at 13:41
• "d" in "function(d)..." is the current object, it's defined by D3, i just improved the question – M.Tamimi Commented Jan 17, 2015 at 14:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You never ever need to write any loop constructs when using D3.

What you have here is a simple nested structure.

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

You can read about nested selections here: http://bost.ocks/mike/nest/

本文标签： javascriptD3 loop array inside data objectStack Overflow