如何创建图例d3？

Question

I took this example from internet:It works fine except that it creates only two rects. I also fail to see why those rectangles are created since I would expect only one. I created this fiddle which seem not to work. https://jsfiddle.net/q4py7wxg/ . Please help.

var color = d3.scale.linear()
          .range(["rgb(213,222,217)", "rgb(69,173,168)", "rgb(84,36,55)", "rgb(217,91,67)"]);

        var legendText = ["0 - 1000", "1000 - 2000", "2000 - 3000", "3000 - 5000"];
        var legend = d3.select("body").append("svg")
            .attr("class", "legend")
            .attr("width", 140)
            .attr("height", 200)
            .selectAll("g")
            .data(color.domain().slice().reverse())
            .enter()
            .append("g")
            .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

        legend.append("rect")
              .attr("width", 18)
              .attr("height", 18)
              .style("fill", color);

        legend.append("text")
              .data(legendText)
              .attr("x", 24)
              .attr("y", 9)
              .attr("dy", ".35em")
              .text(function(d) { return d; });

Answer 1

You wonder why your code...

Creates only two rects.

This is the reason: in D3, if you don't set the domain, the default domain is:

[0, 1]

And that's why you're seeing only two rectangles. Let's see it in this snippet, where color.domain().slice().reverse() is the data you're passing in your code:

 //look Ma, no domain! var color = d3.scaleLinear(); console.log(color.domain().slice().reverse()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script> 

As you can see, your data is an array with only two elements.

Solution : first, change your domain:

.domain(d3.range(4))

Which is the same of:

.domain([0,1,2,3])

And change your data accordingly:

.data(d3.range(4))

PS: do not change your data without changing your domain, this will extrapolate the colours, that is, the scale will return colours that are not in the range.

PS2: you're using the wrong scale for the task. It's working (kind of), but it's a strange code to any seasoned d3 coder. Consider using scales with discrete ranges, like scaleQuantize , scaleQuantile or scaleThreshold .

Here is the fiddle: https://jsfiddle.net/9oxu4xyh/

Answer 2

Your are using the wrong version of D3, try d3.scaleLinear(). instead of d3.scale.linear()