javascript - Legend in Multi line chart - d3 -

while adding legend multi line graph result is:

the passed ,failed etc... half visible. code:

   var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 1090 - margin.left - margin.right, height = 339 - margin.top - margin.bottom;   var x = d3.scale.linear() .range([0, width]);     var y = d3.scale.linear() .range([height, 0]);    var color = d3.scale.category10();    var xaxis = d3.svg.axis() .scale(x) .orient("bottom");  var yaxis = d3.svg.axis() .scale(y) .orient("left");    var line = d3.svg.line()   .interpolate("linear") .x(function(d) { return x(d.days); }) .y(function(d) { return y(d.testruns); });   var svg = d3.select("#application_status_graph").append("svg") .attr("width", width + margin.left + margin.right + '0%') .attr("height", height + margin.top + margin.bottom)  .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");   d3.json("js/linechartdata.json", function(error, data) { color.domain(d3.keys(data[0]).filter(function(key) {return key !== "days"; }));    data.foreach(function(d) {     d.days = parseint(d.days);    });     var status = color.domain().map(function(name){ return{     name: name,     values: data.map(function(d){         return {days: d.days, testruns: +d[name]};     })  }    });     x.domain(d3.extent(data, function(d) { return d.days; }));  y.domain([0, d3.max(status, function(c) { return d3.max(c.values, function(v) {           return v.testruns; }); })]);    svg.append("g")   .attr("class", "x axis")   .attr("transform", "translate(0," + height + ")")   .call(xaxis);     svg.append("g")   .attr("class", "y axis")   .call(yaxis) .append("text")   .attr("transform", "rotate(-90)")   .attr("y", 6)   .attr("dy", ".71em")   .style("text-anchor", "end")   .text("number of test runs");  var legend = svg.selectall('.city')     .data(status)     .enter().append('g')     .attr('class', 'legend');  legend.append("path")   .attr("class", "line")   .attr("d", function(d) { return line(d.values); })   .style("stroke", function(d) { return color(d.name); });  legend.append('rect')     .attr('x', width - 20)     .attr('y', function(d, i){ return *  20;})     .attr('width', 10)     .attr('height', 10)     .style('fill', function(d) {        return color(d.name);     });  legend.append('text')     .attr('x', width - 8)     .attr('y', function(d, i){ return (i *  20) + 9;})     .text(function(d){ return d.name; });   }); 

i have played around width around code. couldn't acheive following:

any suggestions? thanks.

to achieve this, need 2 things. first, restrict x range of graph doesn't extend far. easiest way adjusting range of x scale:

var x = d3.scale.linear()           .range([0, width-20]); 

second, need adjust coordinates of legend:

legend.append('rect').attr('x', width - 30) 

and other elements. on general note, may prefer moving entire legend group instead of each element individually, i.e. move group so:

var legend = svg.append("g")                 .attr("transform", "translate(" + (width - 30) + ",20)")                 .selectall('.city')                 .data(status)                 ... 

then coordinates of legend elements local group , moving entire legend requires adjusting coordinates of g element.