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; }); 

Вы должны использовать enter(), но enter() и exit() методы не могут быть использованы с datum(). Цитирование от d3 wiki

selection.datum ([значение])

Получает или устанавливает связанные данные для каждого выбранного элемента. В отличие от метода selection.data, этот метод не вычисляет объединение (и, следовательно, не вычисляет выбор входа и выхода).

Answer 2

Вы, кажется, отсутствуют Введите желанный() после .datum().

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"; })); 

Перед добавлением в «прямоугольник» вы должны использовать функцию ввода() смотрите ссылку для точного объяснения Click Here