- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在用 D3 JS 制作热图,X 轴为年,Y 轴为月。每个单元格都是一个温度,并基于此获得不同的“填充”颜色。我的问题是如何制作一个色标来映射具有一系列颜色代码的 minTemp/maxTemp 域。到目前为止,我有下面的代码,但这不起作用:
var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json"
d3.json(url, function(json){
//load data from API and save in variable data
var data = json.monthlyVariance;
var baseTemp = json.baseTemperature;
//Add temperature to each object in data set
for(var i = 0; i < data.length; i++){
var temperature = baseTemp + data[i].variance
data[i].temperature = temperature;
var monthString = "";
switch(data[i].month){
case 1:
data[i].monthString = "January";
break;
case 2:
data[i].monthString = "February";
break;
case 3:
data[i].monthString = "March";
break;
case 4:
data[i].monthString = "April";
break;
case 5:
data[i].monthString = "May";
break;
case 6:
data[i].monthString = "June";
break;
case 7:
data[i].monthString = "July";
break;
case 8:
data[i].monthString = "August";
break;
case 9:
data[i].monthString = "September";
break;
case 10:
data[i].monthString = "October";
break;
case 11:
data[i].monthString = "November";
break;
case 12:
data[i].monthString = "December";
break;
}
}
//Set dimensions of div container, svg, and chart area(g element)
var margin = {top: 20, right: 40, bottom: 40, left: 80};
//Width of the chart, within SVG element
var w = 1000 - margin.left - margin.right;
//Height of the chart, within SVG element
var h = 500 - margin.top - margin.bottom;
//Create SVG element and append to #chart div container
var svg = d3.select("#chart")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Get Min Max values
var maxYear = d3.max(data, function(d){
return d.year;
});
var minYear = d3.min(data, function(d){
return d.year;
});
var maxTemp = d3.max(data, function(d){
return d.temperature;
});
var minTemp = d3.min(data, function(d){
return d.temperature;
})
//Create X scale, axis and label
var xScale = d3.scaleLinear()
.domain([minYear, maxYear])
.range([0,w]);
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(20)
.tickFormat(d3.format("d"));
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
//Create Y scale, axis and label
var cellHeight = (h / 12);
var yRange = [];
for(var i = 0; i < 12 ; i++){
yRange.push(i * cellHeight);
}
var yScale = d3.scaleOrdinal()
.domain(["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"])
.range(yRange);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(12);
svg.append("g")
//append a g element
.attr("class", "axis")
.call(yAxis)
//call yAxis function on this g element
.selectAll(".tick text")
//select all elements with class tick and nested text element
.attr("transform", "translate(0," + (cellHeight/2) + ")");
//move all text elements half a cell height down
//Create color scale
var colors = d3.scaleOrdinal()
.domain([minTemp,maxTemp])
.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);
//Select all rect elements in G container element, bind data and append
var cells = svg.selectAll("cells")
.data(data)
.enter()
.append("rect");
var cellAttributes = cells
.attr("x", function(d){
return xScale(d.year);
})
.attr("y", function(d){
return yScale(d.monthString);
})
.attr("width", w/(maxYear-minYear))
.attr("height", h/12)
.attr("fill", function(d){
return colors(d);
})
.attr("class", "cell");
});
我可以在填充属性函数中写一个很长的 if/else 语句,将温度映射到颜色代码,但这不是我认为的“D3 方式”。我怎样才能用秤做到这一点?:
var colors = d3.scaleOrdinal()
.domain([minTemp,maxTemp])
.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);
最佳答案
这里不需要序数尺度。你需要一个 quantize改为缩放:
Quantize scales are similar to linear scales, except they use a discrete rather than continuous range. The continuous input domain is divided into uniform segments based on the number of values in (i.e., the cardinality of) the output range.
因此,这应该是您的体重秤:
var colors = d3.scaleQuantize()
.domain([minTemp,maxTemp])
.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598",
"#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);
这是一个演示:
var data = d3.range(50);
var colors = d3.scaleQuantize()
.domain([0,50])
.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598",
"#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);
var svg = d3.select("svg");
var rects = svg.selectAll(".rects")
.data(data)
.enter()
.append("rect")
.attr("y", 10)
.attr("height", 100)
.attr("x", (d,i)=>10 + i*9)
.attr("width", 6)
.attr("fill", d=>colors(d))
.attr("stroke", "gray");
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500"></svg>
您还可以使用 scaleLinear
,它具有在颜色之间进行插值的优点(因此,颜色数组中的颜色将超过 11 种)。但是要注意在域中设置相同数量的元素,使用d3.ticks
:
d3.ticks(minTemp, maxTemp, 11);
这是一个使用 scaleLinear
的演示:
var data = d3.range(50);
var colors = d3.scaleLinear()
.domain(d3.ticks(0, 50, 11))
.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598",
"#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);
var svg = d3.select("svg");
var rects = svg.selectAll(".rects")
.data(data)
.enter()
.append("rect")
.attr("y", 10)
.attr("height", 100)
.attr("x", (d,i)=>10 + i*9)
.attr("width", 6)
.attr("fill", d=>colors(d))
.attr("stroke", "gray");
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500"></svg>
关于javascript - 如何在 D3 JS 中制作色标以用于填充属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41848677/
我在业余时间慢慢学习javascript,但还没有完全掌握这一点。但一位 friend 要求我制作一个简单的机器人,它可以向每个加入服务器的新用户发送私信,询问他们希望用户名的颜色是什么,并将他们添加
抱歉,标题令人困惑,我会澄清一下。我正在尝试让机器人检查用户是否在他们的 quick.db 库存中具有特定 Angular 色,如果有,它就会装备该 Angular 色。我遇到的问题是,即使在 lis
所以我想做一个小的用户配置文件,但我希望它打印出用户 Angular 色。可能吗? case "Profile": var embed = new Discord.RichEmbed()
我有一个表单,其中包含三个不同的 data-role="page" 和三个不同的 data-url="abc"。 根据某些条件,单击第一页上的按钮后,我将在第二页上渲染/显示某些字段。 现在我正在获取
我有一行不和谐机器人的代码,用于删除特定的命名 Angular 色并添加一个名为“静音”的 Angular 色一段特定的时间。基本上,服务器只能有 3 个 Angular 色,一个可以发出命令,一个具
我想在编写函数时在编辑页面上显示文本的标题。 应用程序.html {{ text }} 应用程序.ts getRoleEdit
如果 s 是一个系列,我在运行以下命令时会收到一条错误消息: s.plot(style='k--', color='b') 错误消息说 [b] 不是可识别的颜色。 我正在使用 Pandas 0.11。
这是一个 fiddle http://jsfiddle.net/aLr2yx8d/ $('#inputButton').click(function() { var value = $(
所以,基本上。我想做的是创建一个单词解密器,您可以在其中输入一个打乱的单词并对其进行解密。它工作得很好,尽管我单独检查每个字符,但由于某种原因,额外的字符漏掉了。 我输入“olehl (hello)”
在尝试console.log字符串时,我遇到了一个相当烦人的问题。我将字符串 2^{\\frac{1}{2}}x=1 存储在 Node.js 数据库中,但输出时给出 2^{rac{1}{2 }}x=1
我想创建一个命令来查找用户在服务器中拥有的最高 Angular 色。 我已经知道Python中有一个discord.user.top_role。是否有相当于该功能的 Javascript? 我尝试将此
我对 Node.js 相当陌生,目前正在开发一个 Discord 机器人。我试图让我的机器人根据用户传递的参数分配服务器 Angular 色。我知道我可以找到特定 Angular 色的名称,然后根据他
我一直在尝试创建一个简单的命令,为在聊天中说话的人提供一个 Angular 色,假设他们说了一句脏话,它会给 message.author 静音 Angular 色。 client.on("messa
如何使用expressjs和passport在nodejs中实现基于 Angular 色的授权/访问控制以及如何完美设计 Angular 色中间件? 我有两种登录类型管理员和用户 以管理员和用户的名义
我在这里有一个键盘可访问的自定义下拉组件:https://codesandbox.io/s/31440w1vo6 但是,当我打开 NVDA 或 JAWS 时,激活“选择等位基因”后焦点不会再移动到选项
我正在为我的机器人创建 Angular 色分配命令,因此用户可以输入 h.addrole @user @role 我正在尝试执行此命令,如果用户拥有该 Angular 色,它会输出说 此用户已经拥有此
我想从数据库中获取用户的 Angular 色(组织或个人)。我有一个名为“Users”的表,另一个名为“Role_users”的表,其中有 user_id 和 role_id(1 代表个人,100 代
我有一个在 Vuejs 项目中导出一些函数的文件,我还需要在外部环境中使用它们..在 Component 中我知道我要使用哪个函数应该通过名称识别并与 .JSON 文件进行比较来使用,这在开发环境中很
我想将用户添加到我的 Parse.Role 但它不起作用。我看了很多例子,它们看起来都很简单,但我无法正确理解。这是我的代码: Parse.Cloud.define("activateVendor",
我克隆了一个 https://github.com/beeman/loopback-angular-admin我已经使用环回资源管理器创建了几个新 Angular 色,但是如何为我创建的用户分配 An
我是一名优秀的程序员,十分优秀!