4

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

"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;
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.