Question

我对编程和编码非常陌生。我使用Adobe Illustrator生成的.svg文件与d3.js制作交互式地图。

此SVG由带有多边形的g组织，其中多边形具有自己的id＆＃39; s。我还在SVG中为每个多边形添加了自定义数据（data-price =＆＃34; number＆＃34;）：

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

我希望我已经明白了。

Answer 1

获取＆＃34;数据的方法＆＃34;每个多边形的属性都使用dataset：

HTMLElement.dataset属性允许在读取和写入模式下访问元素上设置的所有自定义数据属性（data- *），无论是在HTML中还是在DOM中。

在您的情况下，this是当前DOM元素：

this.dataset.price

请注意，这将返回一个字符串，您可能希望将其强制转换为数字。

以下是演示，使用data-price的值填充多边形：

＆＃13;

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

＆＃13;

<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>

＆＃13;

PS：如果价值高于2500，则不清楚颜色是什么。

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

1 个答案: