Question

我从互联网上拿了这个例子：它工作正常，只是它只创建两个rects。我也没有看到为什么这些矩形被创建，因为我只期望一个。我创造了这个小提琴似乎不起作用。 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

你想知道为什么你的代码......

只创建两个rects。

这就是原因：在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()

如何创建传奇d3？

2 个答案: