如何创建图例d3

Question

我在互联网上举了这个例子：它工作得很好，只是只创建了两个rect。我也不明白为什么要创建这些矩形，因为我只希望有一个。我创造了这把似乎不起作用的小提琴。https://jsfiddle.net/q4py7wxg/.请帮忙。

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

您想知道为什么您的代码。。。

只创建两个矩形。

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

[0, 1]

这就是为什么你只看到两个矩形。让我们在这个片段中看到它，其中color.domain().slice().reverse()是您在代码中传递的数据：

//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>

正如您所看到的，您的数据是一个只有两个元素的数组。

解决方案：首先，更改您的域：

.domain(d3.range(4))

与相同

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

并相应地更改您的数据：

.data(d3.range(4))

PS：在不更改您的域的情况下，不要更改您的数据，这将推断颜色，也就是说，标尺将返回不在范围内的颜色。

PS2：你在任务中使用了错误的比例。它正在工作(有点)，但对于任何经验丰富的d3程序员来说，这都是一个奇怪的代码。考虑使用具有离散范围的刻度，如scaleQuantize、scaleQuantile或scaleThreshold。

这是小提琴：https://jsfiddle.net/9oxu4xyh/

Answer 2

您使用的D3版本错误，请尝试d3.scaleLinear().而不是d3.scale.linear()