D3 - легенда не будет визуализировать

Question

Я попытался создать легенду, используя вдохновение от http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend. Однако, несмотря на то, что почти тот же самый код, легенда не визуализируется. Вот jsfiddle и код: http://jsfiddle.net/u5hd25qs/

var width = $(window).width(); 
var height = $(window).height()/2; 


var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var legendRectSize = 36; // 18 
var legendSpacing = 8; // 4 
var recordTypes = [] 

recordTypes.push({ 
    text : "call", 
    color : "#438DCA" 
}); 

recordTypes.push({ 
    text : "text", 
    color : "#70C05A" 
}); 

var legend = svg.selectAll('.legend') 
    .data(recordTypes) 
    .enter() 
    .append('g') 
    .attr('class', 'legend') 
    .attr('transform', function (d, i) { 
     var height = legendRectSize + legendSpacing; 
     var offset = height * recordTypes.length/2; 
     var horz = -2 * legendRectSize; 
     var vert = i * height - offset; 
     return 'translate(' + horz + ',' + vert + ')'; 
    }); 

legend.append('rect') 
.attr('width', legendRectSize) 
.attr('height', legendRectSize) 
.style('fill', function (d) { 
    return d.color 
}) 
.style('stroke', function (d) { 
    return d.color 
}); 

legend.append('text') 
.attr('x', legendRectSize + legendSpacing) 
.attr('y', legendRectSize - legendSpacing) 
.text(function (d) { 
    return d.text; 
}); 

Answer 1

Ваш код работает нормально, но это то, что вы создаете:

<g class="legend" transform="translate(-72,-44)">... 

Потому что ваше translate правило имеет отрицательные значения в нем, легенда расположена снаружи экран (это просто не видно).

Теперь пример, на котором вы работаете, имеет круговую диаграмму, которая уже была translate d в центре экрана, поэтому отрицательные значения не являются проблемой.

Вы должны изменить свою математику или обернуть легенду в какой-то контейнер, который можно расположить таким же образом, как пример круговой диаграммы:

legendContainer 
    .attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');