javascript - 如何将多个图像添加到 D3 中的 svg(数量基于数据集中的值)

Question

如何多次将图像应用于 svg，数量基于数据集中的值？我正在尝试这样做:

数据集:

var dataset = [{"attribute": "att1", "data": "5"}, {"attribute": "att2", "data": "10"}]

SVG:

属性1

$$$$$

攻击2

$$$$$$$$$$

...$ 是图像。

下面的代码根据属性出现次数而不是“数据”添加图像。所以我得到2张图片。如何获得出现次数分别为 5 次和 10 次的 2 组图像？

var w = 300;
var h = 300;
var p = 20;

var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.style("border", "1px solid black");

var img = svg.selectAll("image")
.data(dataset)
.enter()
.append("svg:image")
.attr("x", function(d,i) {return (i * 10);})
.attr("width", 50)
.attr("height", 50)
.style("border", "1px solid black")
.attr("xlink:href", "images/xyz.png");

Answer 1

这是一个使用d3.range()设置重复次数的解决方案。

在此解决方案中，我将数据绑定(bind)到父组...

var groups = svg.selectAll("foo")
    .data(data)

...并且，在图像选择中，我使用了一个数组，其长度由数据集中的属性 data 决定:

var images = groups.selectAll("bar")
    .data(d => d3.range(d.data))

查看演示:

var dataset = [{
  image: "http://icons.webpatashala.com/icons/Blueberry-Basic-Icons/Png/rss-icon.PNG",
  data: 5
}, {
  image: "http://www.ucdmc.ucdavis.edu/global/images/icons/instagram-32x32.png",
  data: 3
}, {
  image: "http://www.axadledirect.com/assets/images/icons/share/32x32/google.png",
  data: 8
}];

var svg = d3.select("svg");

var groups = svg.selectAll("foo")
    .data(dataset)
    .enter()
    .append("g")
    .attr("transform", (d, i) => "translate(10," + (10 + i * 40) + ")");

var images = groups.selectAll("bar")
    .data(d => d3.range(d.data))
    .enter()
    .append("svg:image")
    .attr("x", function(d, i) {
        return (i * 35);
    })
    .attr("xlink:href", function(d) {
        return d3.select(this.parentNode).datum().image
    });

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>