- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 LeafletJs 和 D3js 将条形图放入 Leaflet 弹出窗口中。
如何为每个族裔群体栏指定自定义颜色?我想在 D3 代码中分配自定义颜色,因为我无法修改原始数据集。 Link
谢谢。
var onEachFeature = function onEachFeature(feature, layer) {
colors = d3.scale.category20()
var div = $('<div id="chart"><h3>Ethnic Group Distribution</h3><svg/><h4>Additional details:</h4>Extra stuff here</div>')[0];
var popup = L.popup({
minWidth: 500,
minHeight: 350
}).setContent(div);
layer.bindPopup(popup);
var values = feature.properties;
var data = [{
name: "Pashtun",
value: values["Pashtun"]
}, {
name: "Tajik",
value: values["Tajik"]
}, {
name: "Uzbek",
value: values["Uzbek"]
}, {
name: "Turkmen",
value: values["Turkmen"]
}, {
name: "Hazara",
value: values["Hazara"]
}, {
name: "Baloch",
value: values["Baloch"]
}, {
name: "Kirghiz",
value: values["Kirghiz"]
}, {
name: "Nuristani",
value: values["Nuristani"]
}, {
name: "Aimak",
value: values["Aimak"]
}, {
name: "Arab",
value: values["Arab"]
}, {
name: "Pashaye",
value: values["Pashaye"]
}, {
name: "Sadat",
value: values["Sadat"]
}, {
name: "Qezelbash",
value: values["Qezelbash"]
}];
var margin = {
top: 20,
right: 90,
bottom: 80,
left: 30
},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom,
barWidth = width / data.length;
var x = d3.scale.linear()
.domain([0, data.length])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d) {
return "";
})
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
var svg = d3.select(div)
.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.classed("chart", true);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var bar = svg.selectAll("g.bar")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(" + (i * barWidth + 5) + ",0)";
});
bar.append("rect")
.attr("y", function(d) {
if (!isNaN(d.value)) {
return y(d.value);
} else {
return 0;
}
})
.attr("width", barWidth - 10)
.attr("height", function(d) {
if (!isNaN(d.value)) {
return height - y(d.value);
} else {
return 0;
}
})
.attr("fill",function(d,i){return colors(i)})
bar.append("text")
.attr("x", function(d) {
return -height - 70;
})
.attr("y", barWidth / 2)
.attr("transform", "rotate(270)")
.text(function(d) {
return d.name;
});
};
var geojson = L.geoJson(myData, {
onEachFeature: onEachFeature
}).addTo(map);
数据集测试:
var afghanDistrictsSample = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"stroke": "#555555",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#555555",
"fill-opacity": 0.5,
"Pashtun": 0.43,
"Tajik": 0.12,
"Uzbek": 0.05,
"Turkmen": 0.00,
"Hazara": 0.00,
"District": "Argo",
"Province": "Kandahar"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[61.69921875, 32.08257455954592],
[61.69921875, 32.879587173066305],
[62.666015625, 32.879587173066305],
[62.666015625, 32.08257455954592],
[61.69921875, 32.08257455954592]
]
]
}
}, {
"type": "Feature",
"properties": {
"Pashtun": 0.32,
"Tajik": 0.20,
"Uzbek": 0.01,
"Turkmen": 0.02,
"Hazara": 0.00,
"District": "Jurm",
"Province": "Farah"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[62.75390625, 32.95336814579932],
[62.75390625, 33.76088200086917],
[63.69873046874999, 33.76088200086917],
[63.69873046874999, 32.95336814579932],
[62.75390625, 32.95336814579932]
]
]
}
}, {
"type": "Feature",
"properties": {
"Pashtun": 0.05,
"Tajik": 0.50,
"Uzbek": 0.21,
"Turkmen": 0.00,
"Hazara": 0.00,
"District": "Ragh",
"Province": "Ghor"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[63.74267578125, 33.54139466898275],
[63.74267578125, 34.43409789359469],
[65.14892578125, 34.43409789359469],
[65.14892578125, 33.54139466898275],
[63.74267578125, 33.54139466898275]
]
]
}
}, {
"type": "Feature",
"properties": {
"Pashtun": 0.00,
"Tajik": 0.01,
"Uzbek": 0.10,
"Turkmen": 0.20,
"Hazara": 0.40,
"District": "Highan",
"Province": "Kabul"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[64.53369140625, 35.15584570226544],
[64.53369140625, 35.94243575255426],
[65.56640625, 35.94243575255426],
[65.56640625, 35.15584570226544],
[64.53369140625, 35.15584570226544]
]
]
}
}, {
"type": "Feature",
"properties": {
"Pashtun": 0.00,
"Tajik": 0.01,
"Uzbek": 0.20,
"Turkmen": 0.30,
"Hazara": 0.04,
"District": "Nusay",
"Province": "Kunduz"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[65.58837890625, 33.30298618122413],
[65.58837890625, 34.32529192442733],
[66.90673828125, 34.32529192442733],
[66.90673828125, 33.30298618122413],
[65.58837890625, 33.30298618122413]
]
]
}
}, {
"type": "Feature",
"properties": {
"Pashtun": 0.20,
"Tajik": 0.00,
"Uzbek": 0.00,
"Turkmen": 0.10,
"Hazara": 0.20,
"District": "Zebak",
"Province": "Logar"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[65.98388671875, 34.72355492704219],
[65.98388671875, 35.53222622770337],
[66.95068359374999, 35.53222622770337],
[66.95068359374999, 34.72355492704219],
[65.98388671875, 34.72355492704219]
]
]
}
}, {
"type": "Feature",
"properties": {
"Pashtun": 0.10,
"Tajik": 0.10,
"Uzbek": 0.28,
"Turkmen": 0.10,
"Hazara": 0.00,
"District": "Wakhan",
"Province": "Nimruz"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[67.32421875, 34.43409789359469],
[67.32421875, 35.42486791930558],
[68.37890625, 35.42486791930558],
[68.37890625, 34.43409789359469],
[67.32421875, 34.43409789359469]
]
]
}
}]
};
最佳答案
而不是使用内置的分类颜色...
colors = d3.scale.category20()
...您可以尝试使用序数标尺...
var colors = d3.scale.ordinal()
.domain(['Pashtun','Tajik','Uzbek', 'Turkmen', 'Hazara', 'Baloch','Kirghiz','Nuristani','Aimak', 'Arab','Pashaye','Sadat','Qezelbash'])
.range(['red', 'white', 'green', 'blue', 'yellow', 'pink', 'lime', 'black', 'navy', 'silver', 'skyblue', 'purple', 'olive' ])
...然后修改代码以查找名称:
.attr("fill", function(d, i) { return colors(d.name) })
我没有测试代码,但如果它不起作用,您可以在此处阅读有关序数比例的更多信息: https://github.com/mbostock/d3/wiki/Ordinal-Scales
或者,您可以简单地向元素添加一个类...
.attr("class", function(d, i) { return 'bar_' + d.name} )
...并在 CSS 中对其进行分类:
.bar_Pashtun { fill: blue }
关于d3.js - 如何为 D3.js 条形图中的条形指定自定义颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36219431/
我正在我的 java 作业中使用 GUI,并且我必须指定 JCheckBox 中的其他内容。除了这个小要求,其他的我都完成了。我不太确定如何解决这个问题,我查阅了我的书并尝试在线研究 要求: 一系列复
在各种语言中(我将在这里使用 JavaScript,但我已经在 PHP 和 C++ 中以及可能在其他地方看到过它),似乎有几种构造简单 for 循环的方法。版本 1 如下: var top = doc
有没有一种方法可以使用 CSS 指定每次“小于符号”(在键盘上 M 的右侧)或“大于符号”出现在文本中时,它应该被替换为分别是“小于”或“大于”的实际词? 最佳答案 CSS 不能作用于(不能修改,即)
首先,使用 setspn 命令为用户注册服务主体名称。 setspn -a CS/dummy@abc.com dummyuser setspn -l dummyuser 给出输出为 CS/dummy@
我在指定从 SFSafariViewController 访问时遇到问题,因为它具有与 Safari 浏览器完全相同的用户代理。 我要做的是仅在 webview 内显示图片,如果在普通浏览器上查看,则
我正在尝试用 R 语言在 lavaan 中指定一个奇怪的模型。该模型如下所示: 我的规范尝试如下所示。我发现难以实现的是将观察到的变量的唯一误差固定为唯一项的两个相关性的总和。 例如,项目 y*1,2
我正在构建 API 以将我的 React 应用程序与我的后端服务连接起来,我想使用 typescript 来指定 data 的类型在我的 Axios 请求中。如何在不修改其他字段的情况下更新 Axio
如何为模型指定初始“软”值?该初始模型是解决类似查询的结果,并且该模型很可能具有正确的部分,甚至对于当前查询可能是正确的。 目前,我正在通过增量求解和 hard/soft constraints 对此
我有来自网页的以下代码 https://cwiki.apache.org/confluence/display/KAFKA/0.8.0+Producer+Example 似乎缺少的是如何配置分区数。我
有没有办法在每个查询的基础上在 Neo4jClient 中指定 Cypher 解析器的版本,如 here 所述? 谢谢! 最佳答案 如果您将 Neo4jClient 更新到最新版本(> 1.0.0.6
我有以下代码生成四个图,但它们最终被压扁(见下图)。我该如何解决这个问题? par(mfrow=c(2,2)) curve(.5*exp(-.5*x),from=0,to=10,main="f(x)"
我有一个 ColdFusion 10 服务器。我正在使用 JDBC 驱动程序连接到 db2 数据库。我偶然发现了这个笔记。这个设置在哪里?我还查看了 neo*.xml 文件,但没有看到任何 db 驱动
我想知道是否可以指定验证器的运行顺序。 目前,我编写了一个自定义验证器,检查它是否为 [a-zA-Z0-9]+ 以确保登录验证我们的规则,并编写了一个远程验证器以确保登录可用,但目前远程验证器已启动在
我的应用程序需要至少 40MB 的 RAM,因此早期的 iPhone(例如 3G、第一个 iPod touch 版本)就没有它(它们为我的应用程序提供的最大内存约为 20MB)。有没有正确的方法来禁用
我有一个保存日期(不是当前日期)的 Date 对象,我需要以某种方式指定该日期为 UTC,然后将其转换为“欧洲/巴黎”,即 +1 小时。 public static LocalDateTime toL
我想问你在 Varnish 代码中如何在没有缓存的情况下将请求传递到后端。 我知道我可以做到并且正在发挥作用: if (req.url ~ "(\?|&)(something|somethin
我目前基于模块编译程序(如主程序 foo 依赖于模块 bar )如下: gfortran -c bar.f90 gfortran -o foo.exe foo.f90 bar.o 这在 foo.f90
我正在尝试创建一个依赖于另一个 meteor 包的新 meteor 包。当我尝试 meteor add mypackage 时,出现以下错误。为什么 Meteor 不添加 mypackage 并引入它
我正在制作执行器/ react 器,同时发现这是一个终生的问题。它与 async/Future 无关,可以在没有 async 糖的情况下进行复制。 use std::future::Future; s
我在 cassandra 中有一个表,其数据类型为时间戳。我正在使用 cqlsh 从数据库中获取数据,并希望更改我的时间戳列输出的输出格式。我研究了一下,发现我可以通过更改以下文件来更改时间戳输出格式
我是一名优秀的程序员,十分优秀!