How to change the icon of a pictogram?

Question

I was trying to change the icon from the pictogram of this example: http://bl.ocks.org/alansmithy/d832fc03f6e6a91e99f4

The part of the code that render the icon is that:

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

I downloaded this SVG from flat icon:

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

But when i change the Path in original code, nothing appears. The code modified is:

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

And it doesn't show anything. What's going on? How can i change the icon?

Answer 1

That moneybag is not a single path, like the pictogram in the original code you linked. Instead of that, the moneybag is a complex SVG, viewBox included... therefore, you cannot simply replace the d attribute like that.

That being said, an easy approach is converting that whole SVG into a string...

const moneyBagHtml = '<svg version="1.1" id="Capa_1" xmlns="http://www.w3 etc...

... that you append using html():

svgDoc.append("defs")
    .append("g")
    .attr("id","iconCustom")
    .html(moneyBagHtml)

Of course, you have to set a width and a height to scale down that SVG.

Here is the result:

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