d3 + Leaflet apply class value from geojson data

Question

I have a geojson file that I'm able to draw just fine with D3 + Leaflet. I'm having trouble applying a class to the svg objects with a value from the geojson file. Each feature in the geojson file has a 'handle' attribute. I'm using:

feature.attr("class", function (d) {
    return "code " + d.handle;
});

to try and apply the value, but all of the objects come up with the class of "code undefined". I don't think I'm binding the data correctly..or at all to the svg objects. Any ideas?

bl.ocks.org version: http://bl.ocks.org/jamierob/a21843bf2b7f3eb54456

js:

<script>
    var map = new L.Map("map", {center: [46.861967, -113.982825], zoom: 17})
            .addLayer(new L.TileLayer("http://tile1.map.umt.edu/tiles/tiles.py/composite/{z}/{x}/{y}.png"));
    var svg = d3.select(map.getPanes().overlayPane).append("svg"),
            g = svg.append("g").attr("class", "leaflet-zoom-hide");
    d3.json("bldgs.geojson", function (collection) {
        var transform = d3.geo.transform({point: projectPoint}),
                path = d3.geo.path().projection(transform);
        var feature = g.selectAll("path")
                .data(collection.features)
                .enter()
                .append("path");
        map.on("viewreset", reset);
        reset();
        // Reposition the SVG to cover the features.
        function reset() {
            var bounds = path.bounds(collection),
                    topLeft = bounds[0],
                    bottomRight = bounds[1];
            svg.attr("width", bottomRight[0] - topLeft[0])
                    .attr("height", bottomRight[1] - topLeft[1])
                    .style("left", topLeft[0] + "px")
                    .style("top", topLeft[1] + "px");
            g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
            //apply a class with the 'handle' value from the geojson file
            feature.attr("class", function (d) {
                return "code " + d.handle;
            });
            feature.attr("d", path);
        }
        // Use Leaflet to implement a D3 geometric transformation.
        function projectPoint(x, y) {
            var point = map.latLngToLayerPoint(new L.LatLng(y, x));
            this.stream.point(point.x, point.y);
        }
    });
</script>

Answer 1

"handle" is in the properties of the feature, so it just needs to be d.properties.handle

Try:

feature.attr("class", function (d) {
  return "code " + d.properties.handle;
});