我试图从这个例子的象形图中更改图标: 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>
但是当我更改原始代码中的路径时，什么也没有出现。修改后的代码为:
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");
它没有显示任何内容。这是怎么回事？如何更改图标？
最佳答案
那个钱袋子不是单一路径，就像您链接的原始代码中的象形图一样。相反，moneybag 是一个复杂的 SVG，包括 viewBox...因此，您不能像那样简单地替换 d 属性。
也就是说，一种简单的方法是将整个 SVG 转换为字符串...
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 和 height 才能缩小 SVG。
结果如下:
<!doctype html>
<html>
<head>
<!--demonstration of using the svg 'use' element to create a pictogram-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style type="text/css">
#sliderDiv {
margin: 10px;
margin-top: 30px;
height: 15px;
width: 300px;
}
svg {
overflow: none;
padding: 10px;
float: left;
width: 400px;
height: 400px;
}
text {
fill: #bb6d82;
text-anchor: left;
font-size: 12px;
font-family: sans-serif, Helvetica, Arial;
font-weight: bold;
}
.iconPlain {
fill: #a7a59b;
}
.iconSelected {
fill: #bb6d82;
}
rect {
fill: #fff1e0;
}
</style>
</head>
<body>
<script>
const moneyBagHtml = '<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" width="7px" height="7px"><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.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.601z M246.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"/></g></svg>';
//placeholder div for jquery slider
d3.select("body").append("div").attr("id", "sliderDiv");
//create svg element
var svgDoc = d3.select("body").append("svg").attr("viewBox", "0 0 100 100");
//define an icon store it in svg <defs> elements as a reusable component - this geometry can be generated from Inkscape, Illustrator or similar
svgDoc.append("defs")
.append("g")
.attr("id", "iconCustom")
.html(moneyBagHtml)
//background rectangle
svgDoc.append("rect").attr("width", 100).attr("height", 100);
//specify the number of columns and rows for pictogram layout
var numCols = 10;
var numRows = 10;
//padding for the grid
var xPadding = 10;
var yPadding = 15;
//horizontal and vertical spacing between the icons
var hBuffer = 8;
var wBuffer = 8;
//generate a d3 range for the total number of required elements
var myIndex = d3.range(numCols * numRows);
//text element to display number of icons highlighted
svgDoc.append("text")
.attr("id", "txtValue")
.attr("x", xPadding)
.attr("y", yPadding)
.attr("dy", -3)
.text("0");
//create group element and create an svg <use> element for each icon
svgDoc.append("g")
.attr("id", "pictoLayer")
.selectAll("use")
.data(myIndex)
.enter()
.append("use")
.attr("xlink:href", "#iconCustom")
.attr("id", function(d) {
return "icon" + d;
})
.attr("x", function(d) {
var remainder = d % numCols; //calculates the x position (column number) using modulus
return xPadding + (remainder * wBuffer); //apply the buffer and return value
})
.attr("y", function(d) {
var whole = Math.floor(d / numCols) //calculates the y position (row number)
return yPadding + (whole * hBuffer); //apply the buffer and return the value
})
.classed("iconPlain", true);
//create a jquery slider to control the pictogram
$("#sliderDiv").slider({
orientation: "horizontal",
min: 0,
max: numCols * numRows,
value: 0,
slide: function(event, ui) {
d3.select("#txtValue").text(ui.value);
d3.selectAll("use").attr("class", function(d, i) {
if (d < ui.value) {
return "iconSelected";
} else {
return "iconPlain";
}
});
}
});
</script>
</body>
</html>关于javascript - 如何更改象形图的图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56623182/