CODEWITHSUNDEEP
javascriptdomsvgd3.js
Roman
Roman

Reputation: 9461

d3.js path dom element

I am creating a streamgraph, having used the example code from http://bl.ocks.org/mbostock/4060954 as a template.

I draw the streamgraph:

var svg = d3.select("#graph_area").append("svg") 
    .attr("width", width)
    .attr("height", height)

....

svg.selectAll("path")  
    .data(layers) 
.enter().append("path")  
    .attr("d", function (d) {return area(d.layer);})

Now it seems that I am not allowed to choose a different name from "path" for the DOM element here. If I do, then streamgraph no longer plots. Why is that?

Then I want to add a legend with bullets, but they don't plot. The elements show up in my web inspector (firebug), but their graphical representation is just not there. I figured it might be a similar problem with the DOM element name, but I don't actually know. Here is the code for my bullets:

//draw all the legend bullets and effects
svg.selectAll("bullets")  
    .data(layers)  
.enter().append("bullets")  
    .attr("cx", 200)
    .attr("cy", function(d, i) { return 20 + i*10; })
    .style("fill", function(d) { return d.color; })
    .attr("r", 5)

I briefly looked at API's for paths here and here, but I didn't find my answers there.

Upvotes: 0

Views: 100

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109292

The element names you can use are defined in the SVG specification. This is a specific set (e.g. path, circle) -- using anything else will work in terms of appending the element to the DOM, but the browser won't know how to interpret and render it.

It's the same way in HTML -- there's a specific set of defined element names that browsers know how to render.

Upvotes: 1

Related Questions