在D3JS圖中添加靜態/明確的圖例

Question

我有一個D3JS散點圖，其數據源是MYSQL請求。 基本上數據點是（x，y，類別），類別可以是（A，B，C，D，E）。 有時，MySQL Select請求的類別爲A或B沒有意義。

但是，我希望所有類別都包含在我的圖例中，而不管每個類別中是否存在至少一個點數據源。

今天，我對點下面的代碼，其中，顏色「harcoded」，以確保「A」類的點總是在顏色＃4a9b5b（和同爲B，C，DE）：

  // draw dots 
      svg.selectAll(".dot") 
       .data(data) 
      .enter().append("circle") 
       .attr("class", "dot") 
       .attr("r", 7) 
       .attr("cx", xMap) 
       .attr("cy", yMap) 
       .style("fill", function(d) { 
        if (d.category == "A") {return "#4a9b5b"} 
        else if (d.category == "B") { return "#5caeb9" } 
        else if (d.category == "C") { return "#df4b4b" } 
        else if (d.category == "D") { return "#cb7e51" } 
        else { return "#ffffff" } 
       ;}) 
       . [ ... ] 

而下面的圖例[不工作]：

var legend = svg.selectAll(".legend") 
    .data(color.domain()) 
.enter().append("g") 
    .attr("class", "legend") 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

// draw legend colored rectangles 
legend.append("rect") 
    .attr("x", width - 18) 
    .attr("width", 18) 
    .attr("height", 18) 
    .style("fill", color); 

// draw legend text 
legend.append("text") 
    .attr("x", width - 24) 
    .attr("y", 9) 
    .attr("dy", ".35em") 
    .style("text-anchor", "end") 
    .text(function(d) { return d;}); 

我正在尋找類似的東西點，具有相同的傳奇，無論數據來源，是這樣的：

Category A [#4a9b5b"] 
Category B [#5caeb9"] 
Category C [#df4b4b"] 
Category D [#cb7e51"] 
Category E [#ffffff"] 

Answer 1

做這樣製作色標：

//make color as re the possible domain 
var color = d3.scale.ordinal() 
    .domain(["A", "B", "C", "D", "E"]) 
    .range([#4a9b5b", "#5caeb9" , "#df4b4b", "#cb7e51", "#ffffff"]); 


svg.selectAll(".dot") 
       .data(data) 
      .enter().append("circle") 
       .attr("class", "dot") 
       .attr("r", 7) 
       .attr("cx", xMap) 
       .attr("cy", yMap) 
       .style("fill", function(d) { 
        return color(d.category);//no need for if now 
       ;}) 

製作傳說這樣

var legend = svg.selectAll(".legend") 
    .data(["A", "B", "C", "D", "E"])//hard coding the labels as the datset may have or may not have but legend should be complete. 
.enter().append("g") 
    .attr("class", "legend") 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

// draw legend colored rectangles 
legend.append("rect") 
    .attr("x", width - 18) 
    .attr("width", 18) 
    .attr("height", 18) 
    .style("fill", function(d){return color(d)}); 

// draw legend text 
legend.append("text") 
    .attr("x", width - 24) 
    .attr("y", 9) 
    .attr("dy", ".35em") 
    .style("text-anchor", "end") 
    .text(function(d) { return d;}); 

希望這有助於！