javascript - Styling a Legend in D3 -

i having hard time understanding fundamental wrapping g elements in d3 legend trying render here. why or how can legend display in horizontal line this legend @ top?

consider:

var wrap = svg.selectall('.legend').append('g').data(color.domain());         var genter = wrap.enter().append('g').attr('class', 'legend')             .append('g');         var legend = wrap.select('g').style("width",1000)             .attr("transform", function(d, i) { return "translate(" + * 20 + ",0)"; });          // draw legend colored circles         legend.append("circle")             .style("fill", color)             .style('stroke', color)             .attr('r', 5);          // // draw legend text         legend.append("text")             .attr("x", width - 24)             .attr("y", 9)             .attr("dy", ".35em")             .style("text-anchor", "end")             .text(function(d) { return d;}); 

thanks in advance.

you need utilize transform , translate (transformation method) in order effect. also, note, circle , text legend wont have connection. in order effect must position them correct corresponding math. in solution using static numbers, gist. in order make dynamic have create type of function dynamically calculate positions.

heres changed in order wanted behavior:

var legend = wrap.select('g').style("width",1000)             .attr("transform", function(d, i) { return "translate(" + * 80 + ",0)"; });          // draw legend colored circles         legend.append("circle")             .style("fill", color)             .style('stroke', color)             .attr('r', 5)             .attr('transform', 'translate(550,20)');          // // draw legend text         legend.append("text")             .attr("dy", ".35em")             .attr('transform', 'translate(560,20)')             .text(function(d) { return d;}) 

and here fiddle: https://jsfiddle.net/yt2zhx63/