Javascript 按高度百分比（d3.js）填充象形图中绘制的最后一个svg图形

我正在尝试修改这个。我想创造一个类似的影响，但没有用户输入。我的目标是显示50个SVG图形，但要让100个图形中的数据都显示出来。例如，如果数据输入为27，则填充13.5个图形

从我在d3工作的有限经验来看，我知道如果不是所有css，代码将不得不省略大部分。这是我迄今为止的尝试

我真的不确定如何处理最后一个元素的转换，以便根据27/2的数据，它只能填充最后一个图形50%

这是代码

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

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


//specify the number of columns and rows for pictogram layout
var numCols = 10;
var numRows = 5;

//padding for the grid
var xPadding = 10;
var yPadding = 15;

//horizontal and vertical spacing between the icons
var hBuffer = 9;
var wBuffer = 8;

//generate a d3 range for the total number of required elements
var myIndex = d3.range(numCols * numRows);
var myData = 27/2

//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
  })
  .transition()
  .duration(1000)
  .style("fill", function(d) {
    if(d < myData) {
      return "steelblue"
    }

  })

作为脚注

我也在尝试遵循enter、update、exit范式，这样我就可以轻松地使用新数据进行更新，尽管这不是问题的基础，但是任何关于如何编写代码的建议都非常感谢

，如果您认为继续这样做会更好地解决问题

---

提前感谢您的建议/帮助

最简单的解决方案可能是使用渐变来实现半人情况，然后使用类将渐变附加到实例上，就像您对黑色和蓝色变体所做的那样

一半 { 填充：urlhalfgrad； }

---

最简单的解决方案可能是使用渐变来实现半人情况，然后使用类将渐变附加到实例，就像您对黑色和蓝色变体所做的那样

一半 { 填充：urlhalfgrad； }