Question

我正在努力让我的等值地图工作。我有一个CSV文件的值和区域名称，我想与我的TopoJSON地图匹配。 CSV地图上的数据如下所示：

id, values
NAIROBI,50
MOMBASA,10
KWALE,20
KILIFI,40
TANA RIVER,50
LAMU,10

id列用于肯尼亚地区的名称，值是任意的，只是根据我使用的阈值范围设置的域生成颜色。由于某种原因，颜色不会产生。这是我的其余代码。请告诉我哪里出错了？我一直试图修复它无济于事：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <script type="text/javascript" src="d3.v3.js"></script>
            <script type="text/javascript" src="js/topojson.js"></script>
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/bootstrap.js"></script>



            <link rel="stylesheet" href="css/bootstrap.css" media="screen">
    </head>
    <body>
        <div class="row">
        <header class="span12">
            <h1>Aphellion Activity 1 - Kenya Maps</h1>
            <h3>The goal of this activity is generate two maps one drawn with D3.js using GeoJSON to generates the paths, the other drawn using TopoJSON to generate the paths.</h3>
        </header>
        </div>
        </br>
        <div class="row">
            <div  class="span6" id="Map1">
                <p>This first map of Kenya was made using TopoJSON.</p>
            </div>
            <div class="span6" id="Map2">
                <p>This second map of Kenya was made using GeoJSON.</p>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var width = 460;
        var height = 400;

        //Setting the color domains for the choropleth maps
        var color = d3.scale.threshold()
                    .domain([10, 20, 30, 40, 50])
                    .range(["#9e9ac8", "756bb1", "dadaeb", "bcbddc", "#E82D0C"]);

     //TopoJSON Map
        //new projection
           var projection = d3.geo.mercator()
                            .center([36.8000, 1.2667])
                            .scale([1000])
                            .translate([width/2, height/2]);



        var path = d3.geo.path().projection(projection);

         //Drawing Choropleth

         var svg = d3.select("div#Map1")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height);

        var g = svg.append("g")
                    .call(d3.behavior.zoom()
                    .scaleExtent([1, 10])
                    .on("zoom", zoom));

        d3.json("js/output.json", function(error, topology) {
            d3.csv("js/Schools.csv", function(error, Schools) {
              var rateById = {};

              Schools.forEach(function (d) {
              rateById[d.id] = +d.values;
                  });

      g.append("g")
            .attr("class", "districts")
            .selectAll("path")
            .data(topojson.feature(topology, topology.objects.kenya).features)
            .enter()
            .append("path")
            .attr("d", path)
            .style("fill", function(d) {
                return color(rateById[d.id]);
            });


        });                        
        });

        //Draw a rect around the map
        svg.append("rect").attr("width", width).attr("height", height).style("stroke", "black").style("fill", "none")
                   ;

        function zoom() {
            g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")};
    </script>
</html>

Answer 1

你非常非常接近。您返回一个空哈希值return rateById = {};，而不是声明它在您的代码var rateById = {};中使用。

我已使用对库的正确引用更新了PLUNK，并为其添加了CSS样式。

唯一的另一个变化是我为演示目的使用了更多对比色，但你可以取消注释原始颜色，它会正常工作。

D3 Choropleth Map CSV

1 个答案: