Javascript 如何创建图例d3？

我从互联网上举了一个例子：它工作得很好，只是它只创建了两个矩形。我也不明白为什么要创建这些矩形，因为我只希望有一个。我发明了这把小提琴，但似乎不起作用。请帮忙

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

---

如果您使用的D3版本不正确，请尝试使用

D3.scaleLinear（）。

而不是

D3.scale.linear（）

您想知道为什么您的代码

只创建两个矩形

这就是原因：在D3中，如果不设置域，默认域是：

[0, 1]

这就是为什么你只能看到两个矩形。让我们在这个片段中看到它，其中

color.domain（）.slice（）.reverse（）

是您在代码中传递的数据：

//看，妈，没有域名！
var color=d3.scaleLinear（）；
log（color.domain（）.slice（）.reverse（））
非常感谢。我已经纠正了这个问题，但是在给定数据的情况下，如何渲染4个矩形呢。