在D3JS图形中添加静态/定图例 [英] Add a static/definite legend in D3JS graph

问题描述

我有一个D3JS散点图，其数据源是MYSQL请求. 基本上，数据点是(x，y，category)，类别可以是(A，B，C，D，E). 有时，MySQL Select请求中没有类别为A或B的点.

I have a D3JS scatter plot, whose data source is a MYSQL request. Basically data points are (x, y, category) and category can be (A,B,C,D,E). Sometimes, there is no point in MySQL Select request whose category is A, or B.

但是，我希望所有类别都包含在我的图例中，无论数据源中表示的每个类别是否至少有一个点.

BUT, I want all categories to be included in my legend, no matter if there is at least one point for each category represented in data source.

今天，我有以下用于点的代码，其中的颜色已编码"，以确保类别"A"的点始终为#4a9b5b颜色(与B，C，D E相同):

Today, I have the following code for dots, where color is "harcoded" to ensure that Category "A" dots are ALWAYS in color #4a9b5b (and same for B, C, D E):

            // 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" }
              ;})
              . [ ... ]

以及以下图例[NOT WORKING]:

And the following legend [ NOT WORKING ] :

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

无论数据源如何，我都在寻找与点类似的东西，以具有相同的图例，例如:

I am looking for something similar to the dots, to have the same legend no matter the data source, something like :

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

推荐答案

执行以下操作以制作色阶:

Do like this for making color scale:

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

希望这会有所帮助！

这篇关于在D3JS图形中添加静态/定图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！