如何更改象形图的图标？

时间：2019-06-16 22:55:19

标签： javascript d3.js svg

我试图从此示例的象形图中更改图标： http://bl.ocks.org/alansmithy/d832fc03f6e6a91e99f4

呈现图标的代码部分是：

svgDoc.append("defs")
    .append("g")
    .attr("id","iconCustom")
    .append("path")
    .attr("d","M3.5,2H2.7C3,1.8,3.3,1.5,3.3,1.1c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1c0,0.4,0.2,0.7,0.6,0.9H1.1C0.7,2,0.4,2.3,0.4,2.6v1.9c0,0.3,0.3,0.6,0.6,0.6h0.2c0,0,0,0.1,0,0.1v1.9c0,0.3,0.2,0.6,0.3,0.6h1.3c0.2,0,0.3-0.3,0.3-0.6V5.3c0,0,0-0.1,0-0.1h0.2c0.3,0,0.6-0.3,0.6-0.6V2.6C4.1,2.3,3.8,2,3.5,2z");

我从平面图标下载了此SVG：

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 459.568 459.568" style="enable-background:new 0 0 459.568 459.568;" xml:space="preserve">
<g>
    <path d="M246.817,335.072v22.294c6.493-1.547,9.753-5.069,9.753-10.583C256.57,340.489,252.547,337.797,246.817,335.072z"/>
    <path d="M214.638,278.05c0,5.329,2.549,8.266,7.179,10.798v-21.562C217.032,269.302,214.638,272.891,214.638,278.05z"/>
    <path d="M338.492,240.601c-23.908-18.506-42.082-42.997-52.978-70.59c9.327-1.696,16.404-9.844,16.404-19.66
        c0-11.046-8.954-20-20-20h-6.649c-0.002-0.014-0.003-0.029-0.005-0.043c10.651-0.447,19.154-9.197,19.154-19.957
        c0-10.213-7.659-18.621-17.544-19.834c2.814-11.83,7.72-23.151,14.61-33.38l19.381-28.771c3.759-5.58,4.132-12.777,0.972-18.716
        C308.676,3.711,302.497,0,295.77,0H163.799c-6.727,0-12.906,3.711-16.066,9.65c-3.16,5.939-2.786,13.137,0.972,18.716
        l19.381,28.771c6.89,10.229,11.796,21.549,14.61,33.38c-9.885,1.213-17.544,9.622-17.544,19.834
        c0,10.76,8.504,19.511,19.154,19.957c-0.002,0.014-0.003,0.028-0.005,0.043h-6.649c-11.046,0-20,8.954-20,20
        c0,9.819,7.081,17.968,16.411,19.661c-10.89,27.592-29.06,52.068-52.986,70.589c-33.52,25.947-54.626,63.707-54.626,105.745
        c0,35.448,15.012,67.851,39.818,92.695c13.122,13.143,30.933,20.528,49.505,20.528h148.031c18.577,0,36.393-7.39,49.516-20.539
        c24.794-24.844,39.797-57.243,39.797-92.684C393.118,304.307,372.012,266.547,338.492,240.601z M246.817,389.698v14.246
        c0,6.904-5.596,12.5-12.5,12.5s-12.5-5.596-12.5-12.5v-14.77c-11.288-1.477-22.959-4.491-33.823-9.161
        c-4.434-1.906-7.882-5.559-9.535-10.093c-1.653-4.534-1.372-9.558,0.799-13.869l0.02-0.039c3.95-7.846,13.421-11.105,21.367-7.362
        c6.454,3.04,14.213,5.987,21.173,7.653V326.74c-25.719-7.501-43.706-16.848-43.706-43.07c0-23.728,14.366-43.537,43.706-48.711
        v-9.781c0-6.904,5.596-12.5,12.5-12.5s12.5,5.596,12.5,12.5v9.526c9.152,1.259,18.407,4.132,27.216,7.889
        c4.251,1.813,7.546,5.325,9.091,9.681c1.545,4.356,1.207,9.169-0.956,13.254l-0.023,0.044c-3.89,7.348-12.801,10.386-20.377,6.964
        c-4.67-2.11-10.007-4.136-14.951-5.411v29.722l0.026,0.007c28.259,7.766,47.767,17.032,47.767,46.47
        C294.611,372.013,275.029,387.041,246.817,389.698z"/>
</g>
</svg>

但是当我用原始代码更改Path时，什么也没有出现。修改后的代码为：

svgDoc.append("defs")
    .append("g")
    .attr("id","iconCustom")
    .append("path")
    .attr("d","M338.492,240.601c-23.908-18.506-42.082-42.997-52.978-70.59c9.327-1.696,16.404-9.844,16.404-19.66c0-11.046-8.954-20-20-20h-6.649c-0.002-0.014-0.003-0.029-0.005-0.043c10.651-0.447,19.154-9.197,19.154-19.957c0-10.213-7.659-18.621-17.544-19.834c2.814-11.83,7.72-23.151,14.61-33.38l19.381-28.771c3.759-5.58,4.132-12.777,0.972-18.716C308.676,3.711,302.497,0,295.77,0H163.799c-6.727,0-12.906,3.711-16.066,9.65c-3.16,5.939-2.786,13.137,0.972,18.716l19.381,28.771c6.89,10.229,11.796,21.549,14.61,33.38c-9.885,1.213-17.544,9.622-17.544,19.834c0,10.76,8.504,19.511,19.154,19.957c-0.002,0.014-0.003,0.028-0.005,0.043h-6.649c-11.046,0-20,8.954-20,20c0,9.819,7.081,17.968,16.411,19.661c-10.89,27.592-29.06,52.068-52.986,70.589c-33.52,25.947-54.626,63.707-54.626,105.745c0,35.448,15.012,67.851,39.818,92.695c13.122,13.143,30.933,20.528,49.505,20.528h148.031c18.577,0,36.393-7.39,49.516-20.539c24.794-24.844,39.797-57.243,39.797-92.684C393.118,304.307,372.012,266.547,338.492,240.601zM246.817,389.698v14.246c0,6.904-5.596,12.5-12.5,12.5s-12.5-5.596-12.5-12.5v-14.77c-11.288-1.477-22.959-4.491-33.823-9.161c-4.434-1.906-7.882-5.559-9.535-10.093c-1.653-4.534-1.372-9.558,0.799-13.869l0.02-0.039c3.95-7.846,13.421-11.105,21.367-7.362c6.454,3.04,14.213,5.987,21.173,7.653V326.74c-25.719-7.501-43.706-16.848-43.706-43.07c0-23.728,14.366-43.537,43.706-48.711v-9.781c0-6.904,5.596-12.5,12.5-12.5s12.5,5.596,12.5,12.5v9.526c9.152,1.259,18.407,4.132,27.216,7.889c4.251,1.813,7.546,5.325,9.091,9.681c1.545,4.356,1.207,9.169-0.956,13.254l-0.023,0.044c-3.89,7.348-12.801,10.386-20.377,6.964c-4.67-2.11-10.007-4.136-14.951-5.411v29.722l0.026,0.007c28.259,7.766,47.767,17.032,47.767,46.47C294.611,372.013,275.029,387.041,246.817,389.698z")                    
    .attr("d","M246.817,335.072v22.294c6.493-1.547,9.753-5.069,9.753-10.583C256.57,340.489,252.547,337.797,246.817,335.072z")
    .attr("d","M214.638,278.05c0,5.329,2.549,8.266,7.179,10.798v-21.562C217.032,269.302,214.638,272.891,214.638,278.05z");

它什么也没显示。这是怎么回事？如何更改图标？

1 个答案:

答案 0 :(得分：1)

那个钱袋不是一条单一的路径，就像您链接的原始代码中的象形图一样。取而代之的是，moneybag是一个复杂的SVG，其中包括viewBox ...因此，您不能像这样简单地替换file_size = np.array(file_path) index = np.arange(file_size.shape[0]) #this outputs an array of # numbers depending on the length of file_size. # So if I have 10 files it will be 0-9, or 20 files then 0-19 etc np.random.shuffle(index) # randomze the index files_var = int(len(idx)*0.8) # variable to get only 80% of files output = index[:files_var] # output only 8 files output2 = #output remaining numbers 属性。

话虽这么说，一种简单的方法是将整个SVG转换为字符串... 

d

...您使用const moneyBagHtml = '<svg version="1.1" id="Capa_1" xmlns="http://www.w3 etc... 附加的内容：

html()

当然，您必须设置svgDoc.append("defs") .append("g") .attr("id","iconCustom") .html(moneyBagHtml) 和width才能缩小该SVG。

这是结果：

height

相关问题
最新问题