Adding id and or class to rect elements

[hnp...@gmail.com]

I am a bit astonished because I seem not to be able to find a way to add a rect so it gets an id or class as well.

I am building (quite a lot of) rectangles programmatically by the code like below:

var svg = d3.select("#diagram")
        .append("svg")
        .attr("width", 450)
        .attr("height", 600);

$.each(data_val, function(form_key,form_val){
      $.each(form_val, function(person_key,person_val){
       svg.append("rect")
           .attr("x", start*2*width+width-5)
           .attr("y", 420-person_val.loads/person_val.load_max*400)
           .attr("width", width-5)
           .attr("height", person_val.loads/person_val.load_max*400)
           .style("fill", "#ba122b");
      }

}

I would very much to add id (and/or) class like here:

 

svg.append("rect")
           .attr("x", start*2*width+width-5)
           .attr("y", 420-person_val.loads/person_val.load_max*400)
           .attr("width", width-5)
           .attr("height", person_val.loads/person_val.load_max*400)

           .attr("id",$good_id_value)
           .style("fill", "#ba122b");

or

svg.append("rect")
           .attr("x", start*2*width+width-5)
           .attr("y", 420-person_val.loads/person_val.load_max*400)
           .attr("width", width-5)
           .attr("height", person_val.loads/person_val.load_max*400)

           .id($good_id_value)
           .style("fill", "#ba122b");

But, the problem is that it doesn't work, nothing else wrong with it.

Am I missing something, just dumb or dumb but on higher level?

hank

[steve rickus]

Setting the "id" attribute should work this way -- but what is "$good_id_value" ? Maybe just as a test, you could set an index var and use it as the id value, incrementing it inside the loop?

I hesitated to answer this question because your code is so different than the D3 logic usually used, as described in the "Thinking With Joins" tutorial...

Instead of nested for each loops, I would write something more like this (untested, since I don't have your data):

var svg = d3.select("#diagram")
        .append("svg")
            .attr("width", 450)
            .attr("height", 600);

svg.selectAll("rect.boxes")
    .data(d3.values(data_val))
    .enter()
        .append("rect")
           .attr("id", function(d, i) { return "box-" + i; })
           .attr("class", "boxes")
           .attr("x", start*2*width+width-5)
           .attr("y", function(d) { return 420-d.person_val.loads/d.person_val.load_max*400; })
           .attr("width", width-5)
           .attr("height", function(d) { return d.person_val.loads/d.person_val.load_max*400; })

And since the styling does not change with the data, I would just add the css style directives to the page:

<style>
    rect.boxes {
        fill: #ba122b;
    }
</style>

IMO, joins are what separates D3 from other graphics libraries -- although they are tough to get your head around initially, understanding how they work will make your code much simpler to maintain. Good Luck!

--

Steve

On Monday, September 25, 2017 at 5:49:26 AM UTC-4, hnp...@gmail.com wrote:

I would very much to add id (and/or) class like here:

 

svg.append("rect")
           .attr("x", start*2*width+width-5)
           .attr("y", 420-person_val.loads/person_val.load_max*400)
           .attr("width", width-5)
           .attr("height", person_val.loads/person_val.load_max*400)

           .attr("id",$good_id_value)
           .style("fill", "#ba122b");

 

But, the problem is that it doesn't work, nothing else wrong with it.