Question

我是d3.js的新手，也许我的问题非常基本，但我找不到答案......

我正在尝试基于这样的数据数组来实现以下目标：

var data = [
    {
        "items": 10,
        "selected": 8
    },
    {
        "items": 12,
        "selected": 4
    }];

我想为数组的每个元素创建一行圆。圆的数量应该等于items属性，并且在每一行中，所选位置的圆应该是特殊的（如不同的颜色）。对于上面的示例，它应该显示类似于：

的内容

OOOOOOO * OO

OOO * 00000000

第一步，任何有关如何根据数据值创建可变数量的SVG元素的提示都将是一个很大的帮助。

Answer 1

Here's an example I made on codepen.

查看下面的代码和/或分叉代码并进行游戏。

基本上，这里发生的是我为数据数组中的每个项添加一个g元素。通常我们可以为每个数据元素创建一个圆，但由于它包含在属性和变量中，我使用了each循环（每个d3）。这将创建一个项目数量的循环，并为每个项目创建一个圆圈。如果选择了元素，则填充颜色会发生变化。

需要注意的事项：

g元素在y轴上的变换为30 * i。这意味着每个组都将向下堆叠页面。
在for循环中，我们可以使用g访问this元素，但我们必须使用d3 select函数将其作为d3对象引用，以便我们可以追加。

代码：

//add an svg canvas to the page
var svg = d3.select("body")
.append("svg")
.attr("transform", "translate(" + 20 + "," + 20 + ")"); //this will give it a bottom and left margin

//set up some basic data
var data = [
    {
        "items": 10,
        "selected": 8
    },
    {
        "items": 12,
        "selected": 4
    }];

var groups = svg.selectAll("g")
        .data(data)
        .enter()
    .append("g").attr("transform", function(d, i) {
      return "translate(0," + i * 30 + ")";
    });

groups.each(function(d,i) {
    for (var x = 1; x <= d.items; x++) {
      d3.select(this).append('circle').attr({cx: function(d,i) { return (x + 1) * 22; } ,
             cy: 10 ,
             r: 10 ,
             fill: function(d,i) { return x == d.selected ? "yellow" : "blue" }
       }); 
    }
});

使用D3.js创建可变数量的元素

1 个答案: