我从互联网上获取了这个示例:它工作正常,只是它只创建了两个矩形。我也不明白为什么要创建这些矩形,因为我只期望一个。我创建了这个 fiddle ,但它似乎不起作用。 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; });
最佳答案
你想知道为什么你的代码......
Creates only two 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
。
这是 fiddle :https://jsfiddle.net/9oxu4xyh/
关于javascript - 如何创建传奇d3?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41953637/