个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我是一个完全 D3.js n00b 的人，所以如果这最终有一个我完全错过的 super 简单的解决方案，我深表歉意。不管怎样，我正在尝试在世界地图上创建气泡图。它将类似于 Symbol Maps但使用 d3.geo.mercator 而不是 d3.geo.albersUsa。我正在使用 world-countries.json 文件并创建了我自己的 world-country-centroids.json 文件。有任何想法吗？代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Countries of the World</title>
<script type="text/javascript" src="../../d3.v2.js"></script>
<style type="text/css">
svg {
width: 960px;
height: 500px;
}
#countries path, #country-centroids circle {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}
#country-centroids circle {
fill: steelblue;
fill-opacity: .8;
}
</style>
</head>
<body>
<script type="text/javascript">
// The radius scale for the centroids
var r = d3.scale.sqrt()
.domain([0, 1e6])
.range([0, 10]);
// World Map Projection
var xy = d3.geo.mercator(),
path = d3.geo.path().projection(xy);
var svg = d3.select("body").append("svg");
svg.append("g").attr("id", "countries");
svg.append("g").attr("id", "country-centroids");
d3.json("../data/world-countries.json", function(collection) {
svg.select("#countries")
.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", d3.geo.path().projection(xy));
});
d3.json("../data/world-country-centroids.json", function(collection) {
svg.select("#country-centroids")
.selectAll("circle")
.data(collection.features
.sort(function(a, b) { return b.properties.population - a.properties.population; }))
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; })
.attr("r", 0)
.transition()
.duration(1000)
.delay(function(d, i) { return i * 50; })
.attr("r", function(d) { return r(d.properties.population); });
});
</script>
</body>
</html>
最佳答案
您需要在 SVG 元素上设置 width 和 height 属性才能使其可见。不幸的是，这些属性无法通过样式属性设置，因为除了 SVG 元素的显示大小之外，它们还定义了 SVG 的坐标系。
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
如果您想重新缩放 SVG 元素(即，以不同于其原始大小的尺寸显示)，除了属性之外，还可以使用样式属性，但您仍然需要设置属性。
关于javascript - 使用 d3.geo.mercator 的气泡图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12637937/
27
4
0
我目前面临的挑战之一是使用 CSS 沿着图像中的山脉定位不同数量的圆圈/气泡。让我们假设图像看起来像这样(没有红色气泡): 图像始终必须使用设备的整个宽度(100% 宽度)。设备的分辨率差异很大(手机
我在 css3 中创建了一个气泡，但在某些浏览器(特别是 Windows Safari 5.1.7)中，我的跨度溢出了我的 anchor 标记，即使 1) 它是相对定位的并且 2) 具有静态宽度/高度
我使用 e.preventDefault(); 来禁止滚动页面到无效的 input。我试过 scrollintoview(false)，默认情况下将网站滚动到顶部，但它没有做任何事情。 现在，为了将页
我可以制作这样的气泡图吗？' 我试试这个:Highcharts naming of individual bubbles但不起作用:/ 最佳答案 是的，你可以，你提到的所有帖子都指明了方向。基础知识是
我想使用 API v.3 自定义谷歌地图上信息窗口(信息气泡)中的关闭按钮。有简单的方法吗？这意味着 api 正在提供此功能，或者是否有一个好的解决方法。 感谢您的帮助。 更新 我必须补充一点，我想更
我需要帮助将标记(气泡)添加到简单的内容幻灯片中，这将帮助用户在 div 之间切换。 HTML: // etc CSS: #slideshow { position:a
我正在使用 Qtip2 来显示 ajax 请求的返回。我想仅当用户单击它时才显示它。所以我看到了 show: 'click',hide: 'click' 属性，但它不起作用。 我尝试了一些简单的方法，
我正在尝试更改气泡系列的背景和线条颜色。 目前默认为深蓝色边框的蓝色。我希望边框是白色的，气泡背景是透明的。关于如何实现这一目标的任何想法？ 谢谢 雅克 最佳答案 您可以设置一些 plotOption
如何在 jQuery Mobile 中的图标(数据图标)顶部添加计数气泡或徽章。有没有更好的方法将它添加为小部件而不是使用 CSS 进行操作？我希望从服务器动态更新计数。 最佳答案 这是我的徽章图标版
我想知道是否有一种方法可以将 ToolTip 组件添加到气泡中，以显示 Avatar Group 组件中的其他头像。这是组件如何呈现的示例:(图片来自 Material UI 文档(https://m
我正在寻找 Jquery 中的插件，我可以在其中实现 float 气泡。例如，如果我输入数字 5，它必须显示 5 个气泡。气泡的大小也会根据我的输入而增长......我怎样才能实现这一点？ 最佳答案
我正在为我的网站创建一个聊天框。我在其中使用 css3 来创建消息设计。我在使用 Firefox 进行设计时遇到问题，它在 Chrome 中运行良好。 这是图片-- FireFox 浏览器: Chro
jsfiddle:https://jsfiddle.net/leiming/5e6rtgwd/ class Sample extends React.Component { onInputFocu
QQ最新免费设置“天使圣殿”和“星云天使”气泡 QQ最新两款BUG气泡 “天使圣殿”和“星云天使” 现在限时免费设置! 透明的特别好看!好东西记得随手转发给朋友一起设置! 天使圣殿气泡：h
您好，我只是想知道我们是否可以使用 Javascript 捕获 Chrome 中的允许 Flash 事件，并自定义显示的消息以及单击允许或阻止的事件。 最佳答案 TL;DR; 否 这是内置的浏览器功能
我有一个网站，它从服务器端获取一组点，然后使用 azure-maps-control npm 包渲染 map 。 我希望 map 居中并缩放，以适合屏幕上的所有点。 实现这一目标的最佳方法是什么？ 最
我有一个网站，它从服务器端获取一组点，然后使用 azure-maps-control npm 包渲染 map 。 我希望 map 居中并缩放，以适合屏幕上的所有点。 实现这一目标的最佳方法是什么？ 最
我正在将一个 iPhone 应用程序移植到 WP7，其中包含一张带有多个标记/图钉的 map ，这些标记/图钉是我从网络服务(位置、图标和标题)获得的。 我已经设置了显示 map 所需的 XAML 以
我知道 pdMarker(http://www.pixeldevelopment.com/pdmarker.asp) 可以与 Maps API v2 完美配合以生成自定义工具提示和气泡。但是对于 V3
按照 http://bl.ocks.org/mbostock/4063269 上发布的示例开发 d3 气泡图: 我的数据集只有一个分支但有很多子节点(请参见下面的示例)。我所有的气泡都以相同的颜色显示
我是一名优秀的程序员,十分优秀！