javascript - 按高度百分比填充最后一个在象形图中绘制的 svg 图形(d3.js)

Question

我正在尝试修改此pictogram 。我想创建类似的效果，但没有用户输入。我的目标是显示 50 个 SVG 图形，但数据不超过 100 个。因此，例如，如果输入的数据为 27，则将填充 13.5 个图形。

根据我在 d3 中工作的有限经验，我知道代码必须省略大部分(如果不是全部)CSS。这是我迄今为止的尝试；

http://plnkr.co/edit/tZXJ0ZqHp2y3PqYPunah?p=preview

我不太确定如何处理最后一个元素的转换，以便根据 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"
    }

  })

作为脚注；

我还尝试在这里遵循输入、更新、退出范例，这样我就可以轻松地使用新数据进行更新，尽管这不是问题的基础，但关于如何编写代码的任何建议也很重要赞赏!

(First attempt，如果您认为继续这种方式可以更好地解决问题)

预先感谢您的任何建议/帮助!

Answer 1

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

.half
{
  fill: url(#halfgrad);
}

<svg viewBox="0 0 100 100">
  <defs>
    <linearGradient id="halfgrad">
      <stop offset="0.5" stop-color="steelblue"/>
      <stop offset="0.5" stop-color="black"/>
    </linearGradient>
  </defs>

  <path 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" class="half"/>
</svg>

我让渐变水平地分割了这个人。但如果你希望它垂直分割，只需将 LinearGradient 更改为:

<linearGradient id="halfgrad" x2="0" y2="1">