个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我已经包含了下面的 html 代码，其中导入了 dc.js 的 javascript 和 css。当我加载页面时，所有元素都位于正确的位置。当我选择一个县路径元素并取消选择 fill:none css 时， map 将按其应有的方式显示。屏幕截图:fill:none ON fill:none OFF
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Choropleth</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script>
<style type="text/css">
body {
background-color: gray;
}
svg {
background-color: white;
}
</style>
</head>
<body>
<div id="uk-chart">
<strong>Customer locations</strong>
<div class="clearfix"></div>
</div>
<script src="data/customers.js"></script>
<script type="text/javascript">
var ukgraph = function(){
var ukChart = dc.geoChoroplethChart("#uk-chart");
//Width and height
var w = 300;
var h = 500;
//
//Define map projection
var projection = d3.geo.mercator()
.center([ -2, 55 ])
.translate([ w/2, h/2 ])
.scale([ w*4 ]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
var cf = crossfilter(data);
var county_dimension = cf.dimension(function(d){
return d.address_line5;
});
var county_groups = county_dimension.group();
// //Load in GeoJSON data
d3.json("data/geo/simplified_GB.json", function(json) {
ukChart.width(w-10)
.height(h-10)
.projection(projection)
.dimension(county_dimension)
.group(county_groups)
.colors(['#ccc', "#ffffb2", "#fecc5c", "#fd8d3c", "#f03b20", "#bd0026" ])
.colorDomain([
d3.min(county_groups, function(d) { return +d.value; }),
d3.max(county_groups, function(d) { return +d.value; })
])
.overlayGeoJson(json.features, "county", function (d) {
return d.properties.NAME_2;
})
.title(function (p) {
return "customer locations";
});
dc.renderAll();
}); //End d3.json()
};
window.onload = function() {
ukgraph();
}
</script>
</body>
</html>
`
如何修复此问题以便 map 在页面加载时显示？
最佳答案
dc.css 明确提及类名 county 非常可疑。
.dc-chart g.county path {
stroke: white;
fill: none;
}
dc.js 不应该关心您正在使用的具体数据。我能找到的对county的唯一引用是web/play-ground.html
您传递给 overlayGeoJson 的名称将用作类名称，这显然就是它被删除的原因。作为解决方法，您可以更改该名称，对吧？
我已将此记录为错误 in this comment .
关于javascript - DC.js 等值线 map CSS 与颜色冲突，没有 map 显示。如何关闭填充:none?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41139341/
29
4
0
我已经上传了一个 shapefile here . #First, read it in library(rgdal) pols % mutate(id = as.numeric(id)) #some
我正在尝试制作分区统计图，但如何设置 map 的大小？现在我有了这张 map : 我想将 map 扩展到所有空间，我阅读了文档，但没有找到解决方案。 这是我的代码: var data = [{
我有一张美国各州的分区统计图，使用分位数比例显示总人口。我还设置了一个下拉菜单，允许用户使用 colorbrewer 定义的配色方案来选择自己选择的配色方案。选择后， map 将填充新的配色方案。 我
我正在使用 d3(更像是学习使用)来创建等值线图。我已经设法加载我的数据和 geojson 对象并获得要显示的 map ，但我想添加一些转换和用户选择数据的能力。 这是我目前所拥有的示例(感谢 git
我已经包含了下面的 html 代码，其中导入了 dc.js 的 javascript 和 css。当我加载页面时，所有元素都位于正确的位置。当我选择一个县路径元素并取消选择 fill:none css
我是一名优秀的程序员,十分优秀！