d3.js 범례를 여러 줄 시리즈 차트에 추가

Question

어떻게 여러 줄 차트에 범례를 추가 할 수 있습니까? 나는 시도했지만 전설이 표시되지 않습니다. 여기

블록 : 다양한 일련의 제로와 같은 동일한 포인트에 수렴 할 때

http://bl.ocks.org/3884955

는 결함을 갖는다. 모든 레이블이 서로 오버레이됩니다. 이 레이블을 사용하는 대신 전통적 전설이 유용 할 것입니다.

내가 코드의 끝이

var legend = svg.append("g") 
.attr("class", "legend") 
.attr("height", 100) 
.attr("width", 100) 
.attr('transform', 'translate(-20,50)');  

legend.selectAll('rect') 
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
    .append("rect") 
    .attr("x", width) 
    .attr("y", function(d, i){ return i * 20;}) 
    .attr("width", 10) 
    .attr("height", 10) 
    .style("fill", function(d) { 
    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; })); 
    }); 

legend.selectAll('text') 
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
    .append("text") 
    .attr("x", width) 
    .attr("y", function(d, i){ return i * 20 + 9;}) 
    .text(function(d) { 
    return d.name; 
    }); 

을 추가하는 시도, 내 데이터를 포맷하는 방법 키 이름 (d.name) 일치하지만 표시되지 않습니다. 그

이 어떤 통찰력이

Answer 1

Here에 대한 링크를 참조 코드의 고정 & 리팩토링 버전을 입력() 함수입니다 사용해야합니다.

var legend = svg.selectAll('g') 
     .data(cities) 
     .enter() 
     .append('g') 
     .attr('class', 'legend'); 

    legend.append('rect') 
     .attr('x', width - 20) 
     .attr('y', function(d, i){ return i * 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; }); 

당신은 datum() 사용할 수 없습니다 수 enter()하지만 enter() 및 exit() 방법 를 사용해야합니다. d3 wiki

selection.datum에서 ([값]) 것이 인용

가져 선택된 각 요소의 결합 된 데이터를 설정한다. selection.data 메서드와 달리이 메서드는 조인을 계산하지 않으므로 입력 및 종료 선택을 계산하지 않습니다.

Answer 2

감사

당신은 .datum 후 .enter을()없는 것 같다 내가 가까이 오전하지만 중요한 것을 놓치고 의미하므로 하나 개의 시점에서 그래프의 오른쪽에있는 모든 블랙 박스를 보여 주었다() 함수 호출.

legend.selectAll('rect') 

    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 

    .enter() // <====== 

    .append("rect") 

    .attr("x", width) 

    .attr("y", function(d, i){ return i * 20;}) 

    .attr("width", 10) 

    .attr("height", 10) 

    .style("fill", function(d) { 

    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; })); 

은 "RECT"를 추가하기 전에 정확한 설명 Click Here