Svg D3.js/Polymaps-锁定圆的大小并创建工具提示功能
我对D3、Polymaps和整体数据的使用还是相当陌生的。我一直在研究使用d3和polymaps来显示全国太阳能发电站的位置和大小。地图上的每个圆圈对应一个特定的long/lat，以及每个发电厂的英亩大小（从json文件中提取） 我有两个问题（另外，我还查看了有关创建工具提示和设置圆圈比例的文档和教程）Svg D3.js/Polymaps-锁定圆的大小并创建工具提示功能,svg,d3.js,maps,tooltip,polymaps,Svg,D3.js,Maps,Tooltip,Polymaps,我对D3、Polymaps和整体数据的使用还是相当陌生的。我一直在研究使用d3和polymaps来显示全国太阳能发电站的位置和大小。地图上的每个圆圈对应一个特定的long/lat，以及每个发电厂的英亩大小（从json文件中提取） 我有两个问题（另外，我还查看了有关创建工具提示和设置圆圈比例的文档和教程） 尽管缩放级别不同，但圆的大小保持不变 我希望文本标签在每个圆圈悬停或单击时显示为工具提示。（当前将鼠标悬停在任何圆圈上，将显示每个位置的所有文本） 下面是指向当前状态下可视化的链接 这些是
- 尽管缩放级别不同，但圆的大小保持不变
- 我希望文本标签在每个圆圈悬停或单击时显示为工具提示。（当前将鼠标悬停在任何圆圈上，将显示每个位置的所有文本）
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="d3-master/d3.js"></script>
<script type="text/javascript" src="polymaps/polymaps.js"></script>
<script type="text/javascript" src="js/kmeans.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<style type="text/css">@import url("http://polymaps.org/style.css");</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--Content here -->
<section id="all-content">
<h1>US Solar Power Plant Locations</h1>
<p>How are US companies taking advantage of solar Resources? - By building Larger Solar Plants in areas that recieve the most Energy from the sun.<br /> Starting from 1990 to 2025 there has been an increase in the number both planned and completed of solar power plants and their relative size to one another.<br />
Typically the more sun an area gets there is a tendency for Larger Solar Power Plants</p>
<span class="future">*To be displayed on a time-scale. Also names of each power plant will be added later.</span>
<article id="map-instructions">Zoom into the map to get an idea of each solar power plants relative size in Acres</article>
<div id="map"></div>
</section>
<!--Polymaps Build-->
<script type="text/javascript">
var po = org.polymaps;
//Create map object and add to #map
var map = po.map()
.container(d3.select("#map").append("svg:svg").node())
.zoom(4)
.zoomRange([4, 8])
.center({lon: -98.5795, lat: 39.828175})
.add(po.interact());
//Add Image tiles as base
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
//Adding NREL Solar Resource Data as an Overlay
//For adding geoJson files
// Add the compass control on top.
map.add(po.compass()
.pan("none"));
//Load solaruse.json file
d3.json("solaruse.json", function(data){
//Beneath the compas layer
var layer = d3.select("#map svg").insert("svg:g", ".compass");
//insert an svg element for each Solar Array Station
var marker = layer.selectAll("g")
.data(d3.entries(data))
.enter().append("svg:g")
.attr("transform", transform);
var radius = d3.scale.sqrt()
.domain([0, 70])
.range([7, 13]);
//Circle
var circle = marker.append("svg:circle")
//Set attribute value based on Size of each solar plant (Works FIne, Need to fix the scale.)
.attr("r", function(d) { return radius(d.value[4]); });
//Label each on hover (double check)
marker.append("svg:text")
.attr("x", 20)
.attr("dy", ".3em")
.attr("visibility", "hidden")
.text(function(d) { return d.value[1]; }); //*Problems loading the text here, fix the function*
//update marker positions when the map is moved
marker.on("mouseover", function() { layer.selectAll("text").attr("visibility", "visible");
});
map.on("move", function() {
layer.selectAll("g").attr("transform", transform);
});
function transform(d) {
d = map.locationPoint({lon: d.value[5], lat: d.value[6]});
return "translate(" + d.x + "," + d.y + ")";
}
});
</script>
<!--Graphs-->
<div class="chart"></div>
<!--End Graphs-->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>-->
<!-- D3 -->
</body>
@导入url（“http://polymaps.org/style.css");
美国太阳能发电厂位置
美国公司如何利用太阳能资源通过在吸收太阳能量最多的地区建造更大的太阳能发电厂。
从1990年到2025年，太阳能发电厂的计划和完工数量以及它们之间的相对规模都有所增加。
通常，一个地区获得的太阳越多，就有建立大型太阳能发电厂的趋势
*以时间刻度显示。此外，各发电厂的名称将在稍后添加。
放大地图，了解每个太阳能发电厂的相对面积（英亩）
var po=org.polymaps；
//创建地图对象并添加到#地图
var map=po.map（）
.container（d3.select（#map”）.append（“svg:svg”）.node（）
.zoom（4）
.zoomRange（[4,8]）
.center（{lon:-98.5795，lat:39.828175}）
.add（po.interact（））；
//添加图像平铺作为基础
map.add（po.image（）
.url（po.url（“http://{S}tile.cloudmake.com”）
+“/1a1b06b230af4efdbb989ea99e9841af”//http://cloudmade.com/register
+“/998/256/{Z}/{X}/{Y}.png”）
.hosts（[“a.”、“b.”、“c.”、“]”）；
//添加NREL太阳能资源数据作为覆盖
//用于添加geoJson文件
//在顶部添加指南针控件。
map.add（po.compass（）
.pan（无）；
//加载solaruse.json文件
d3.json（“solaruse.json”），函数（数据）{
//在compas层下面
var layer=d3。选择（“映射svg”）。插入（“svg:g”，“compass”）；
//为每个太阳能阵列站插入一个svg元素
变量标记=图层。选择全部（“g”）
.数据（d3.条目（数据））
.enter（）.append（“svg:g”）
.attr（“变换”，变换）；
var radius=d3.scale.sqrt（）
.domain（[0,70]）
.范围（[7,13]）；
//圈
var circle=marker.append（“svg:circle”）
//根据每个太阳能电站的大小设置属性值（工作正常，需要固定比例。）
.attr（“r”，函数（d）{返回半径（d.value[4]）；}；
//在悬停时标记每个标签（双重检查）
marker.append（“svg:text”）
.attr（“x”，20）
.attr（“dy”，“.3em”）
.attr（“可见性”、“隐藏”）
.text（函数（d）{return d.value[1]；}）；//*在此处加载文本时出现问题，请修复该函数*
//移动地图时更新标记位置
marker.on（“mouseover”，function（）{layer.selectAll（“text”）.attr（“可见性”、“可见”）；
});
map.on（“move”，function（）{
layer.selectAll（“g”）.attr（“transform”，transform）；
});
函数变换（d）{
d=映射位置点（{lon:d.value[5]，lat:d.value[6]}）；
返回“translate”（“+d.x+”，“+d.y+”）；
}
});
关于第一个问题，请看一看。它在缩放时更改线条的笔划宽度；你必须为文本做一些类似的事情。对于第二个问题，请看。获得了要运行的工具提示，目前它显示/隐藏了每个发电站的所有标题，无论哪个发电站悬停在哪个发电站上。我怎样才能获得特定圆圈在悬停时显示的标题？这是更新后的链接，您无需获取任何内容，只需添加
title