如何使用svg多邊形自定義屬性（data- *）來設置這些相同的多邊形的樣式？

我對編程和編碼非常陌生。我正在使用由Adobe Illustrator生成的.svg文件與d3.js製作交互式地圖。如何使用svg多邊形自定義屬性（data- *）來設置這些相同的多邊形的樣式？

這個SVG是用g的多邊形裏面有自己的id組織的。我還添加了自定義的數據做每個多邊形的SVG（數據價格=「號」）：

<g id="price-range"> 
    <polygon id="name" data-price="price number" points="..."/> 
    <polygon id="name2" data-price="price2 number" points="..."/> 
    // and so on 
</g>

我想用這些自定義數據屬性的數據來生成這些多邊形的不同風格的輸出。這是到目前爲止我的代碼（它不工作）：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>D3 Test</title> 
    <script type="text/javascript" src="d3/d3.js"></script> 
    <style type="text/css"> 
     #map-block { 
      width: 100%; 
      max-width: 1000px; 
      align-content: center; 
      margin: auto; } 
    </style> 
    </head> 
    <body> 
    <div id="map-block">  
     <svg id="mapa-usados-sp" width="100%"></svg> 
    </div> 

    <script> 
     var svg = null; 
     var mapa = null; 

     d3.xml("sp.svg", function(error, xml) { 
     if (error) throw error; 

     var domSVG = document.getElementById('mapa-usados-sp'); 
     domSVG.appendChild(xml.documentElement.getElementById('mapa')); 

     svg = d3.select(domSVG); 
     mapa = svg.select('#mapa'); 

     var xmlSVG = d3.select(xml.getElementsByTagName('svg')[0]); 
     svg.attr('viewBox', xmlSVG.attr('viewBox')); 

     var bg = mapa.selectAll("g#contexto"); 
      bg.style("fill", "#e9e9e9");  

     var shapes = mapa.select("g#zones").selectAll("polygon"); 
     var price = shapes.(xml.documentElement.getAttribute('data- 
      price')); 
     shapes.style("fill", function(price) { 
       if (price = 0) { return "#323232";} 
       if (price <= 1700 && price > 0) {return "#2169dd";} 
       if (price > 1700 && d <= 2500) {return "#6921dd";} 
     });     
    }); 
     </script> 
</body> 
</html>

我選擇不樣式每個形狀指的它的ID或類，因爲我真的很喜歡使用在.svg文件的自定義數據屬性生成視覺輸出。

最後這將是一個非常有活力的一塊。我將添加交互和事件監聽器，所以這就是爲什麼我非常想知道如何從.svg屬性提取數據並使用它來設置包含這些屬性的形狀。

我希望我已經正確地表達了我的觀點。

來源

2017-04-13 Daniel Ito

你能提供所需的輸出嗎？ – VMAtm

您的問題*標題*有點誤導：它詢問將數據屬性傳遞給D3'data（）'函數。但是，在問題本身中沒有'數據'功能，除此之外您沒有「輸入」選擇。因此，我刪除了標題中對D3'data（）'的引用。 –

@GerardoFurtado這是真的，謝謝！ –

獲得「數據」每個多邊形的屬性的方法是使用dataset：

的HTMLElement.dataset屬性允許訪問，無論是在閱讀和寫作模式，所有的自定義數據屬性（數據並行*）在元素上設置，無論是在HTML中還是在DOM中。

在你的情況，其中this是當前的DOM元素：

this.dataset.price

講究，這將返回一個字符串，你可能需要將其強制爲數字。

這裏是演示，使用的data-price值填充多邊形：

var svg = d3.select("svg"); 
 

 
var shapes = svg.selectAll("polygon"); 
 

 
shapes.each(function() { 
 
    var thisPrice = +this.dataset.price; 
 
    d3.select(this).attr("fill", thisPrice === 0 ? "#323232" : 
 
    thisPrice > 1700 ? "#6921dd" : "#2169dd") 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
    <polygon id="name1" data-price="0" points="30,10 10,50 50,50" /> 
 
    <polygon id="name2" data-price="1000" points="80,10 60,50 100,50" /> 
 
    <polygon id="name3" data-price="2000" points="130,10 110,50 150,50" /> 
 
</svg>

PS：目前還不清楚是什麼顏色，如果該值超過2500

來源

2017-04-14 01:36:57

謝謝Gerardo，你的回答解決了我的問題，甚至讓我覺得這是一個新的強大的工具，它是d3.js的「selection.each」調用。感謝您的快速回復，我對我的回答中的延誤表示歉意！ –

如何使用svg多邊形自定義屬性（data- *）來設置這些相同的多邊形的樣式？

回答

相關問題