D3 JS爲圖表創建一個圖例

Question

我想爲圖表製作我自己的圖例，此刻帶有顏色的酒吧正在出現，但不是文本。這裏是我的代碼：

viz.selectAll("rect").data(data).enter().append("rect") 
    .attr({ 
     x: margin, 
     y: function (d, i) { return ((3*b)/data.length)*i; } , 
     width: 30, 
     height: 15, 
     fill: function(d, i) { return color(i); } 
    }) 
.append("text").text(function (d) { return d.name; }) 
    .attr({ 
     "text-anchor" : "start", 
     x: 2 * margin + parseFloat (d3.select(this).attr("width")), //doing 2* marging so I can add some space between the text and the bar 
     y: parseFloat(d3.select(this).attr("y")) 
    }); 

我也嘗試過的情況下，x和y變爲0我的定位錯了，但沒有奏效。當我試圖用我的瀏覽器檢查元素時，我注意到它沒有添加文本。我做錯了嗎？

Answer 1

您正在將文本添加到rectwhich is not possible。您應該直接添加文本到viz：

viz.selectAll("rect").data(data).enter().append("rect") 
    .attr({ 
    x: margin, 
    y: function (d, i) { return ((3*b)/data.length)*i; } , 
    width: 30, 
    height: 15, 
    fill: function(d, i) { return color(i); } 
    }); 
viz.selectAll("text").data(data).enter().append("text") 
    .text(function (d) { return d.name; }).attr({ 
    "text-anchor" : "start", 
    x: 2*margin + 30, 
    y: function (d, i) { return ((3*b)/data.length)*i; } 
    }); 

或者，也許更清潔，創造g元素，並添加rect和text到（使用比你稍微不同的例子，因爲你沒有給你的數據） ：

var vis = d3.select("#vis").append("svg") 
    .attr("width", width).attr("height", height) 

    var legend = ["red", "green", "blue"]; 
    var colors = ["#FF0000", "#00FF00", "#0000FF"]; 

    var margin = 10; 

    vis.selectAll("g.legend").data(legend).enter().append("g") 
    .attr("class", "legend").attr("transform", function(d,i) { 
     return "translate(" + margin + "," + (margin + i*20) + ")"; 
    }).each(function(d, i) { 
     d3.select(this).append("rect").attr("width", 30).attr("height", 15) 
     .attr("fill", d); 
     d3.select(this).append("text").attr("text-anchor", "start") 
     .attr("x", 30+10).attr("y", 15/2).attr("dy", "0.35em") 
     .text(d); 
    }); 

編輯：本attr("dy", "0.35em")確保文本行的中心水平地與rect的中心對準。請參閱the d3 wiki for an overview。