Question

对于使用D3，Polymaps以及整体数据，我仍然很陌生。我一直致力于使用d3和polymaps来显示全国各地太阳能发电站的位置和大小。地图上的每个圆对应于特定的长/纬，以及每个发电厂的面积（从json文件中提取）。

我有两个问题（另外，我已经查看了创建工具提示的文档和教程，以及设置圆圈的比例）。

尽管有缩放级别，但圆圈的大小仍保持不变
当每个圆圈悬停或点击时，我希望文本标签显示为工具提示。（目前悬停在任何圈子上显示每个位置的所有文本）

以下是当前状态下可视化的链接 http://www.tijaniogunlende.com/dataviz/index.html

这些是我尝试合并的教程/代码（收效甚微） Simple Tooltip，Tooltip with Jquery Tipsy，SVG Geometric Zooming和K-means Clustering

在我尝试在我的代码中实现它们之前，它们看起来都相当简单。我对D3和polymaps有一个基本的了解，但我不得不承认我已经用这个打了一堵墙。

非常感谢任何帮助/指导。

这是我的代码：

<!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>

D3.js / Polymaps - 锁定圆圈大小并创建工具提示功能

0 个答案: