Generating multiple DOM elements from a single data point with D3.js

[Toni Benitez]

Hi

I nedd to generate multiple DOM elements from a single data point.

Every minute I send data like the next format

data:{

date : '22/Nov/2014:01:56:00 +0100'
messures: { 20, 30, 50, 40}
}

And I want to draw for this single data 4 points (circles). {IsoDate, 20}, {IsoDate, 30}, {IsoDate, 50}, {IsoDate, 40}.

I want to do this:

newdata
  .enter()
  .append(function (d, i){
     var circles = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      circles.setAttribute('class', 'messures');
      for (var i = 0; i < d.messures.length; i++){
          var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
          circle.setAttribute('class', 'circle');
          circle.setAttribute('cx', function(d) { return xScale(d.date); })
          circle.setAttribute('cy', function(d) { return yScale(d.messures[i]); });
          circles.appendChild(circle);
       }
        circles.selectAll('.circle');
        return circles;
      });

The problem is that I can set an attribute like circle.setAttribute('class', 'circle'); but not through a function like circle.setAttribute('cx', function(d) { return xScale(d.date); }).

Are there some way to do this?

Thanks

[Joe Keohan]

Toni,

I've refactored your code a bit (jsbin here)  to be more consistent with D3 specific syntax, such as .append("circle") instead of appendChild(".circle") as well as converted measures from a hash to an array and used it as such .data(data.measures).  This was done cause your structure kept erring out as I believe an associative array needs to be a key:value pair but measures contains just values but also so that I could pass D3 those specific values which it will use to create the 4 elements.  For simplicity sake I created a yScale but not an xScale and just placed the circles at position at w/2

I'm assuming that you formatted the data differently in .data() but can't confirm cause that code wasn't provide but I had to manually convert measures into an array so that I could use it as it seems if measures is a hash then it would error out.  

Anyway hope this helps...

Joe

[Toni Benitez]

Hi. Thanks for your answer.

I want that 'cx' in every circle in data is the date, that is common to every messure, so I want to have associated with every circle {date, messure[ i ]}. is it possible? or have the data associated with a group that nest the messures for every data (that the case I showed in my message) but in this case I can't use the function to set 'cx' and 'cy'

in your example, every circle only has associated  the messure but not the date.

Thanks

[Joe Keohan]

Toni,

So I updated the jsbin to include a new reformat() function which creates as many objects as are in the measures array and pushes them into a new newArr array which is what I'm providing to .data().  This way each circle will have a date and value property.

Joe

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/R3bzjBiR7dc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Joe Keohan

[Toni Benitez]

Hi

Thanks. your example is very clear and has been very helpful.