0

I would like to use the customized geojson file to fill the different colors with specific area such as campus. However, I use the "d.properties.campus" but it shows the error message which I don't identify the variable "campus".

Therefore, I cannot fill up the color successfully :(

This is the first way I try to use the style method to build the function inside to extract the specific value which is the campus and fill up to the different colors.=> This way shows the error message to demonstrate that I don't identify the "campus", but I read some solution to see different cases fill the color and it does work in that case (so I don't have any idea why I cannot use the same way to get the same outcome :( !!!)

  d3.json('au_map.json', function(err, geojson) { 
  projection.fitSize([width,height],geojson);
  svg.selectAll('path')
      .data(geojson.features)
      .enter()
      .append('path')
      .attr('d', path(geojson))
      .attr('stroke', '#8080ff')
      .style('opacity', '0.1') // draw the features
      .style('fill', function(d){
        if (d.features.properties.campus === 'ABC Campus'){
            return '#409ffb';
            }
        })});

This is the second way I try to use the filter method to filter the different campuses and fill up the color but it doesn't work (BTW, this way doesn't show the error message) 

  d3.json('au_map.json', function(err, geojson) { 
  projection.fitSize([width,height],geojson);
  svg.selectAll('path')
      .data(geojson.features)
      .enter()
      .append('path')
      .attr('d', path(geojson))
      .attr('stroke', '#8080ff')
      .style('opacity', '0.1') // draw the features
      .filter(function(d) { return d.campus;})
      .style('fill', function(d){
        if (d === 'ABC Campus'){
            return '#409ffb';
            }
        })});

The original data is extracting from the geojson file and it looks like: (and this file contains many of different campuses and I would like to fill different color by each campus)

(""type": "FeatureCollection", "features": [{"type": "Feature","properties": {"stroke": "#8080ff","stroke-width": 2,"stroke-opacity": 1,"fill": "#0080c0",
"fill-opacity": 0.5,"campus": "ABC Campus"},"geometry": {"type": "Polygon", "coordinates": [
        [
            [
                144.971088845,
                -37.835130412
            ],
            [
                144.971691022,
                -37.8342620029999
            ],
            [
                144.971644667,
                -37.8339130749999
            ],
            [
                144.97171201,
                -37.833676738
            ],
            [
                144.971732559,
                -37.8335318269999
            ],
            [
                144.971765628,
                -37.833291623
            ],
            [
                144.971767088,
                -37.833097854
            ],
            [
                144.971754642,
                -37.8329717399999
            ],")

It shows that "campus" doesn't identify so it cannot fill up the specific color within the particular campus

Andrew Reid
  • 37,021
  • 7
  • 64
  • 83
Mountain
  • 33
  • 1
  • 5
  • 1
    `d` is an individual datum, in this case the data of an individual feature of the features array you used to draw the features. So `d.features.properties.campus` won't work because each feature won't have a features property, `d.properties.campus` should have more success. Likewise, you don't want to draw the whole geojson for each feature, try `path` instead of `path(geojson)`: you want each feature to be drawn with the datum attached to it (plain `path` is the same as `function(d) { return path(d); })`). See this [answer](https://stackoverflow.com/a/42628816/7106086) for info on choropleths – Andrew Reid Jun 03 '19 at 01:03
  • It can work partial of the geojson now even it shows **"Uncaught TypeError: Cannot read property 'campus' of undefined"** in the console. But, some of campuses cannot fill the color successfully! – Mountain Jun 03 '19 at 12:42

0 Answers0