어떻게 차트의 상단에있는 전설을 이동하려면 분산 형 차트에 D3.js

Question

을 전설의 위치를 ​​변경하는

내가 상대 CSS 위치를 사용하지만 SVG에서 작동하지 않는 것으로 보인다 시도

codepen

var legend = svg.selectAll(".legend") 
    .data(color.domain()) 
.enter().append("g") 
    .attr("class", "legend") 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

http://codepen.io/7deepakpatil/pen/LkaKoy

에서 참조하시기 바랍니다 것은 위의 전설이 생성되는 코드입니다.

CSS를 사용하거나 가능하면 d3 또는 JS 방식으로 문제를 해결하십시오.

Answer 1

SVG 번역을 사용하십시오. 당신이 가지고있는 것과 비슷하지만 전체 전설에 그것을 적용 할 필요가 있습니다. 그래서는 'g'요소를 추가 나중에에게 쉬운 선택을위한 ID를주고 당신이 그것을 아무것도 추가과 같이 이전에 번역 적용 :

var legend = svg.append('g').attr('id','legendContainer') 
    .attr("transform", function(d) { return "translate(-200,100)"; }) //this is the translate for the legend 
    .selectAll(".legend") 
     .data(color.domain()) 
    .enter().append("g") 
     .attr("class", "legend") 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

업데이트가 codepen : http://codepen.io/anon/pen/GqLXRx