如何創建圖例d3？

Question

我從互聯網上舉了一個例子：除了只創建兩個矩形外，它工作正常。 我也看不到為什么要創建這些矩形，因為我希望只有一個。 我創建了這個小提琴，似乎不起作用。 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()