CODEWITHSUNDEEP
javascriptd3.jssvg
Imo
Imo

Reputation: 1475

SVG wont show fill d3.js

I have an SVG that I made in inkscape, now I want to fill colors in the svg according to dataset values but somehow I can't manage to show even a simple fill. Not sure how to accomplish this. 

var svg_0 = d3.xml("continents_clean.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    d3.select("#viz").node().appendChild(importedNode);



var dataset;

function checkIt(data){
for (var i in data) {
            var data_clean;
            data_clean = data[i].Total
            dataset = data_clean
            fillSvg();

        }

        }

d3.json("data.json", checkIt);


function fillSvg(){
  var svg = d3.select("#level_0")
            .selectAll("path")
            .data(dataset)
            .enter()
            .append("path")
            .style("fill", "purple");
            console.log(svg)
}
});

data 

[{
    "Continent":"Asia.Oceania",
    "Country_Names":"Yemen",
    "Total":20
  },
  {
    "Continent":"Misc",
    "Country_Names":"World marine bunkers",
    "Total":602.2
  },
  {
    "Continent":"Misc",
    "Country_Names":"World aviation bunkers",
    "Total":477.8
  }
]

Upvotes: 0

Views: 418

Answers (1)

sergeyz
sergeyz

Reputation: 1337

I misunderstood you, so ignore what I wrote earlier about .enter().append('path').

Call each method on your selection and make sure your paths are selected and they correspond to the right json data objects. If the callback with the console.log doesn't get fired at all that means you didn't actually select you paths (because of the wrong query string) or that your dataset array doesn't have json objects.

d3.select("#level_0")
            .selectAll("path")
            .data(dataset)
            .each(function(d, i){
              console.log(this, d, i); // <-- make sure that your data corresponds to your dom elements
            })
            .style('fill', function(d){
              return 'purple'; //<-- here you can set the color depending on values of d
            });

If the callback that you passed to each gets called but color hasn't changed, go to the developer tool's Elements panel and check if fill is actually set to purple.

Try also changing the stroke color .style('stroke', 'purple') and see if it changes the stroke of the path.

Good luck!

Upvotes: 2

Related Questions