Question

我有一个geojson文件，并使用D3生成地图。我正在创建一个等值区，并使用json文件中的属性为地图区域着色。对于色标，我正在使用d3.scale.quantile()。如果我手动设置域，它可以正常工作。但是，我正在尝试将我的json文件中的属性范围用作域，并且获取NaN而不是值。该物业被称为“someno”。

这是一个显示我尝试过的Plunker。代码也在下面。

<!DOCTYPE html>
    <meta charset="utf-8">

    <style>
    #boroughs {
      stroke: none;
        stroke-width: 0px;
        fill: #ddd;
        opacity:.7;
        position:absolute;
        top:0;
        left:0;
    }
    #legendcontainer{
      position: absolute;
      bottom:10px;
      right:10px;
    }
    </style>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>

    <body>
    <div id="legendcontainer"></div>
    <script>

    var width = Math.max(960, window.innerWidth),
        height = Math.max(500, window.innerHeight);

    var container = d3.select("body").append("div")
            .attr("id", "container")
            .style("width", width + "px")
            .style("height", height + "px");

    var projection = d3.geo.mercator()
            .center([-73.94, 40.70])
            .scale(80000)
            .translate([(width) / 2, (height)/2]);

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

    d3.json("nyc.json", function(error, nyb) {

    var map = container.append("svg")
            .attr("id", "boroughs")
            .style("width", width + "px")
            .style("height", height + "px");

    var chor = d3.scale.quantile()
        // I don't want to manually specify the domain. How can I get the extent of a property from my shapefile?
        .domain(d3.extent(nyb, function(d) { return d.properties.someno; }))
        // manually specifying the domain works:
        //.domain([0,100])
        .range(["#f8eb60", "#f6bd5a", "#f09253", "#ec654a"]);

    map.selectAll("path")
            .data(nyb.features)
            .enter().append("path")
            .attr("class", function(d){ return d.properties.borough; })
            .attr("d", path)
        .attr("fill", function(d) {
          return chor(d.properties.someno);
        });

        legendheader = d3.select("#legendcontainer")
            .append("p")
            .append("text")
            .text("Legend")
            .style("font-size", "16px");

            var leg = d3.select("#legendcontainer").append("svg");
            var legend = leg.selectAll('g.legendEntry')
            .data(chor.range())
            .enter()
            .append('g').attr('class', 'legendEntry');

            legend
                .append('rect')
                .attr("x", 10)
                .attr("y", function(d, i) {
                   return (i * 20) + 5;
                })
               .attr("width", 15)
               .attr("height", 15)
               .style("stroke", "none")
               .attr("fill", function(d){ return d; });

            legend
               .append('text')
               .attr("x", 35)
               .attr("y", function(d, i) {
                  return (i * 20) + 5;
               })
               .attr("dy", "0.8em")
               .text(function(d,i) {
                   var extent = chor.invertExtent(d);
                   return +extent[0] + " - " + +extent[1];
               })
               .style("font-size", "14px");

    });

    </script>
    </body>
    </html>

Answer 1

看起来你把错误的东西传递给了function(2, 'yes', function(){ ... });。

应该是d3.extent - 数组而不是整个features对象：

nyb

从shapefile获取d3.extent属性以用作域

1 个答案: