draw elements based on presence of an attribute

[Tom Herold]

Hi,

I would like to draw my elements differently based on wether the underlying data object has an attribute or not. For instance, I have edge objects in graph. Some of these have comments, some do not. Is there a way to control my drawing code, based on wether the "comment" attribute is present?

Code (in Coffescript):

    @paths = @paths.data(@edges)

    #add new edges

    path = @paths.enter().append("svg:path")

    path

      .attr(

        class : "edge"

        d : (data) -> data.getLineSegment()

      )

      .style("marker-end", "url(#end-arrow)")

      .append("svg.circle") if datum().comment != undefined ???

          .attr(....)

    #update existing ones

    @paths.attr(

      d : (data) -> data.getLineSegment()

    )

    #remove deleted edges

    @paths.exit().remove()

[Andy Thornton]

Make your attribute a function of the data. As an example:

.append('circle')

   .attr('fill', function (d) { return d.comment ? 'red' : 'black';})

Andy

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Tom Herold]

That is not really what I want. I want to append an object (or not) depending whether the attribute is present.

[Andy Thornton]

More like this?

http://bl.ocks.org/andrewthornton/5636753

You can filter the data prior to binding it to the DOM.

[Tom Herold]

Almost, right. What about the third circle in your demo? I still would like to draw all cirlces regardless of the "comment" attribute. But those circles that have it should get additional svg element. (e.g. callout combined from text and another circle)

Any ideas?

[Ian Johnson]

You can do
.each (d,i) ->
  if d.comment
     d3.select(this).append('circle')...

But you may have an issue appending a circle to a path element. You probably want to put both in a group <g> element.

[Tom Herold]

I suppose I could use .each(). But wouldn't that defeat the whole purpose of enter() and exit()?

But you may have an issue appending a circle to a path element. You probably want to put both in a group <g> element.

Surely, I would that. 

[Ian Johnson]

you're right, i played around and landed on this:

http://tributary.io/inlet/5638004

also these are good if you haven't read them:

http://bost.ocks.org/mike/nest/

http://bost.ocks.org/mike/selection/

Ian Johnson - 周彦

http://enja.org

[Tom Herold]

Well, well. Thank you very Mr. Ian Johnson! I guess that is exactly what I was looking for! I appreciate your effort.