У меня проблемы с получением нескольких изотипных графиков на одной странице.Я думаю, что проблема может быть с элементом svg <use>.selectAll ("использовать")

Question

Вот ссылка на http://bl.ocks.org/alansmithy/d832fc03f6e6a91e99f4 Этот код использует ползунок jquery для управления значением txt и количеством заполненных значков.Я жестко запрограммировал входное значение, но я также хотел бы иметь возможность иметь несколько диаграмм изотипа на одной странице.Текстовое значение корректно, но значение заполнения (количество заполненных значков) одинаково для обеих диаграмм.

var svgDoc=d3.select("body").append("svg").attr("viewBox","0 0 105 25");

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

svgDoc.append("rect").attr("width",105).attr("height",25);

var numCols = 25;
var numRows = 2;
var xPadding = 2;
var yPadding = 8;

var hBuffer = 8;
var wBuffer = 4;

var myIndex=d3.range(numCols*numRows);

svgDoc.append("text")
.attr("id","txtValue")
.attr("x",xPadding)
.attr("y",yPadding)
.attr("dy",-3)
.text("0");

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

var data = { percent: 75 };

/// функция для построения графика:

function drawIsotype(dataObject) {
valueLit = dataObject.percent;
total = numCols * numRows;
valuePict = total * (dataObject.percent / 100);

  d3.select("#txtValue").text(valueLit + '%');
  d3.selectAll("use").attr("class", function (d, i) {
  if (d < valuePict ) {
      return "iconSelected";
  } else {
      return "iconPlain";
  }
  });
  }

drawIsotype(data);

/// Это полный график.Если я создам другую с другими именами переменных, я могу получить 2-й график, но значки заполнены неправильно.

 var svgDoc2=d3.select("#svg2").append("svg").attr("viewBox","0 0 105 45");

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

svgDoc2.append("rect").attr("width",105).attr("height",35);

var numCols2 = 25;
var numRows2 = 3;
var xPadding2 = 2;
var yPadding2 = 8;
var hBuffer2 = 8;
var wBuffer2 = 4;

var myIndex2=d3.range(numCols2*numRows2);

svgDoc2.append("text")
.attr("id","txtValue2")
.attr("x",xPadding2)
.attr("y",yPadding2)
.attr("dy",-3)
.text("0");

svgDoc2.append("g")
.attr("id","pictoLayer")
.selectAll("use")
.data(myIndex2)
.enter()
.append("use")
    .attr("xlink:href","#iconCustom")
    .attr("id",function(e)    {
        return "icon"+e;
    })
    .attr("x",function(e) {
        var remainder=e % numCols2;//calculates the x position (column number) using modulus
        return xPadding2+(remainder*wBuffer2);//apply the buffer and return value
    })
      .attr("y",function(e) {
        var whole=Math.floor(e/numCols2)//calculates the y position (row number)
        return yPadding2+(whole*hBuffer2);//apply the buffer and return the value
    })
    .classed("iconPlain2",true);

var data2 = { percent2: 55 };

function drawIsotype2(dataObject2) {
valueLit2 = dataObject2.percent2;
total2 = numCols2 * numRows2;
valuePict2 = total2 * (dataObject2.percent2 / 100);

    d3.select("#txtValue2").text(valueLit2 + '%');
d3.selectAll("use").attr("class", function (e, i) {
    if (e < valuePict2 ) {
        return "iconSelected2";
    } else {
        return "iconPlain2";
    }
});

}
drawIsotype2(data2);

Answer 1

Между двумя определениями путей нет большой визуальной разницы.

Проблема в том, что они имеют одинаковые id.id должен быть уникальным в HTML DOM.

.attr("id","iconCustom2")  // for defs

и

.attr("xlink:href","#iconCustom2")  // for use

решат проблему с ссылками.

И вам нужно выбрать use тегов в конкретном SVG.Следующее упрощает настройку атрибута класса.Вы можете прокомментировать несколько строк.

// .classed("iconPlain",true);
// .classed("iconPlain2",true);

svgDoc.selectAll("use").classed("selected", d => d < valuePict );

svgDoc2.selectAll("use").classed("selected", d => d < valuePict2 );

Вам нужно немного изменить свой CSS

.selected {fill:steelblue;}