CODEWITHSUNDEEP
javascriptd3.js
S.Dan
S.Dan

Reputation: 1920

how to add new elements to d3 data set used in enter.append?

I have the following data set with only text and color information

var inputs = [{"text": "inleaf1", "col": "red"}, {"text": "inleaf2", "col": "blue"}, {"text": "inleaf3", "col": "green"}];

and the following is used to draw rectangles with text elements in it

            var inputleaf = container.selectAll("rect")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "input-leaf")
                    .attr("width", elementwidth)
                    .attr("height", elementheight)
                    .attr("x", startX)
                    .attr("y", function (d, i) {
                        return startY + ((elementheight + verticalmargin) * i);
                    })
                    .attr("stroke-width", "2")
                    .attr("fill", "none")
                    .attr("stroke", function (d) {
                        return d.col;
                    })
                    .call(function (d) {
                       //--------------------add position details to the data set
                    });

            var inputtext = container.selectAll("text")
                    .data(data)
                    .enter().append("text")
                    .attr("x", startX + elementwidth / 10)
                    .attr("y", function (d, i) {
                        return startY + (elementheight / 2) + ((elementheight + verticalmargin) * i);
                    })
                    .text(function (d) {
                        return d.text;
                    });

during iteration, how can I add more attributes to the dataset, such as the position details. Basically I want to update the dataset.

Upvotes: 0

Views: 72

Answers (2)

Chirag Kothari
Chirag Kothari

Reputation: 1410

You can use selection.each:

var inputleaf = container.selectAll("rect")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "input-leaf")
                    .attr("width", elementwidth)
                    .attr("height", elementheight)
                    .attr("x", startX)
                    .attr("y", function (d, i) {
                        return startY + ((elementheight + verticalmargin) * i);
                    })
                    .attr("stroke-width", "2")
                    .attr("fill", "none")
                    .attr("stroke", function (d) {
                        return d.col;
                    })
                    .each(function (d) {
                       //add position details to the data set
                       d.x = d3.select(this).attr('x');
                       d.y = d3.select(this).attr('y');
                    });

Upvotes: 1

Tim B
Tim B

Reputation: 1983

This is one solution, maybe not the best one : update you data when you set the attr. For example : 

.attr("y", function (d, i) {
      var y = i * 10;
       inputs[i].y = y // or d.y = y
       return y;
})

See this fiddle

Upvotes: 2

Related Questions