SVG不會顯示填充d3.js

我有一個SVG，我在Inkscape中做了，現在我想根據數據集值填充SVG中的顏色，但不知何故我不能設法顯示一個簡單的填充。不知道如何做到這一點。SVG不會顯示填充d3.js

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

數據

[{ 
    "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 
    } 
]

來源

2015-11-06 Imo

我誤解你了，所以不理我剛纔寫的。進入（）。追加（ '路徑'）。

調用您選擇的每種方法，並確保您的路徑被選中，並且它們對應於正確的json數據對象。如果console.log的回調沒有被觸發，那意味着你實際上沒有選擇你的路徑（因爲錯誤的查詢字符串），或者你的數據集數組沒有json對象。

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

如果您傳遞給每個被調用，但顏色沒有變化回調，去開發工具的元素面板，並檢查是否fill實際上是設置爲紫色。

嘗試更改筆觸顏色.style('stroke', 'purple')並查看它是否更改路徑的筆劃。

祝你好運！

來源

2015-11-06 01:02:30 sergeyz

.enter（）。append（'path'）不起作用。控制檯上沒有錯誤。 – Imo

我錯過了一件事。由於您正在追加路徑元素，因此您需要設置「d」屬性（selection.attr（'d'，'路徑字符串'））。你可以在這裏閱讀它https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths – sergeyz

什麼是'路徑字符串'在這裏？我想改變d的值只是它的風格 – Imo

SVG不會顯示填充d3.js

回答

相關問題