使用d3.js根据数据值对svg元素进行着色
使用d3.js根据数据值对svg元素进行着色
提问于 2016-09-20 00:34:30
我想知道如何根据数据集中的值给svg矩形上色？如果我为每个数据条目绘制矩形，我如何根据数据值修改矩形的颜色？
到目前为止，我有：
//Make an SVG Container
var svgContainer = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("width", 38)
.attr("height", 25);
//Draw the rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 5)
.attr("y", 5)
.attr("width", 38)
.attr("height", 25)
//want to color here based on data points, I want the data values to make my rectangles different shades of red
.style("fill", d3.rgb("red").darker(.data(data));假设我的数据如下所示：
var data = {One:420，Two:222，Three:332}，...；我只希望"Two“值影响矩形的颜色
回答 2
Stack Overflow用户
发布于 2016-09-20 06:13:09
如果你想使用一些特定的颜色代码，那么下面的例子将会有所帮助。
- d3 color scale
d3.scale.category10()包含20种颜色 - 创建一个颜色池并在代码中使用
- 根据值
选择颜色
var rectangle = svgContainer.selectAll("rect") .data(data).enter() .append("rect") .attr("x", function(d,i){ return 40*i}) .attr("y", 5) .attr("width", 38) .attr("height", 25) .style("fill", function(d){ return d.Two <= 222 ? 'red' : 'green' });
Stack Overflow用户
发布于 2016-09-20 00:50:37
这是不正确的：
var svgContainer = d3.select("body").selectAll("svg")
.data(data)//INCORRECT
.enter().append("svg")
.attr("width", 38)
.attr("height", 25);您创建的svg数量与数据集的数量一样多。
它应该是：
var svgContainer = d3.select("body")
.append("svg")
.attr("width", 38)
.attr("height", 25);要为矩形指定颜色，请执行以下操作：
//create a color scale
var c10 = d3.scale.category10();现在创建与数据集一样多的矩形
//Draw the rectangle
var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect")
.attr("x", 5)
.attr("y", 5)
.attr("width", 38)
.attr("height", 25)
//want to color here based on data points, I want the data values to make my rectangles different shades of red
.style("fill", function(d){ return c10(d.One)});//use the color scale.工作示例here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39584018
复制相关文章
相似问题
腾讯云开发者
