如何使用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属性提取数据并使用它来设置包含这些属性的形状。

我希望我已经正确地表达了我的观点。

你能提供所需的输出吗？ – 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

谢谢Gerardo，你的回答解决了我的问题，甚至让我觉得这是一个新的强大的工具，它是d3.js的“selection.each”调用。感谢您的快速回复，我对我的回答中的延误表示歉意！ –

如何使用svg多边形自定义属性（data- *）来设置这些相同的多边形的样式？

相关推荐