0

私は、D3、Polymaps、およびデータ全体を操作するのにまだかなり慣れていません。私は、d3 と polymaps を使用して、全国の太陽光発電所の場所とサイズを表示することに取り組んできました。マップ上の各円は、特定の経度/緯度、および各発電所のエーカー単位のサイズ (json ファイルから取得) に対応しています。

私には2つの問題があります(また、ツールチップの作成と円のスケールの設定に関するドキュメントとチュートリアルを見てきました)。

  • ズーム レベルに関係なく、円のサイズは同じままです。
  • 各円にカーソルを合わせるかクリックすると、テキスト ラベルがツールチップとして表示されるようにしたいと思います。(現在、任意の円にカーソルを合わせると、各場所のすべてのテキストが表示されます)

現在の状態のビジュアライゼーションへのリンクは次のとおりです http://www.tijaniogunlende.com/dataviz/index.html

これらは、私が取り入れようとしたチュートリアル/コードです (ほとんど成功しませんでした) Simple TooltipTooltip with Jquery TipsySVG Geometry Zooming、およびK-means Clustering

コードに実装してみるまでは、どれもかなり単純に見えます。私は D3 とポリマップの基本的な理解を持っていますが、これで壁にぶつかったことを認めなければなりません。

ヘルプ/ガイダンスをいただければ幸いです。

ここに私のコードがあります:

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

4

0 に答える 0