D3 : 내 모양 텍스트 링크 향상

Question

이것은 기술/최적화 질문입니다. SA와 bl.ock에서 여러 소스를 사용하여 여기에 표시된 것처럼 수평 텍스트 범례를 얻을 수있었습니다. 나는 독점적 인 이유 때문에 그것을 잘라 냈습니다. 여기

내가 사용하는 코드입니다 :

이

var svg_legend = d3.select("body").append("svg") 
    .attr("width", width+margin.left) 
    .attr("height", 180) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

rects=svg_legend.selectAll("rect") 
.data(coldomain) 
.enter().append("rect") 
.attr("height", 15) 
.attr("x", function(d, i) { return (i+1)*((width-margin.left)/coldomain.length); }) 
.attr("width", 15) 
.style("fill", color);  

text = svg_legend.selectAll("text") 
    .data(coldomain) 
    .enter().append("text") 
    .text(function(d){return d}) 
    .style("fill", 'black') 
    .attr("y", 60) 
    .attr("x", 0) 
    .attr("text-anchor", "end") 
    .style("font-size", "12px") 
    .attr("transform", function(d, i) { return "translate(" + (i)*((width-margin.left)/coldomain.length)+",0) rotate(-65," + 0+"," + 0+") "; }) 

그래서이 작동하지만, 그래서, 하나는 한 번에 사각형과 텍스트를 할 수 있어야 나는 것 같아 당신 그 (것)들을 일렬로 세우는 것에 대해 걱정할 필요는 없을 것입니다. b/c 텍스트는 어떻게 든 사각형과 동적으로 동기화 될 것입니다. 위의 목표를 달성하기위한 더 좋은 방법이 있습니까?

어떤 조언을 주셔서 감사합니다.

Answer 1

주 그룹 아래에 그룹을 만들고이 그룹에 데이터를 바인딩 한 다음 변환 한 다음 각 그룹에 사각형과 텍스트를 추가하는 방법이 있습니다. 이 전략의 개요는 다음과 같습니다 그룹에 바인더 제본

var svg = d3.select('body').append('svg'), 
    grp = svg.append('g') 
     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); 

// Compute the actual translation and replace the zeros 
var groups = grp.selectAll('g') 
    .data(coldomain) 
    .enter() 
    .append('g') 
    .attr('transform', function(d) { return 'translate(0, 0)'; }); 

// The rectangles are now relative to the parent group 
groups.append('rect') 
    .attr('x', 0) 
    .attr('y', -10) 
    .attr('width', 10) 
    .attr('height', 10); 

// The text position is now relative to the parent group 
groups.append('text') 
    .attr('x', 0) 
    .attr('y', 10) 
    .text(function(d) { return d.name; }); 

데이터 항목이 경우는 rect 및 text 요소에, 자녀 요소에 전달됩니다.