Question

有人可以解释使用＆＃34; i＆＃34;。我确实理解x，y，宽度和高度。我也理解我是一个索引，但究竟是什么呢？如果我将我的例子改为i * 2或i * 10，矩形只会变得更宽但仍然是单一的，i * 21使得或者i * 42将它潜入多个矩形。

// D3在这里

            var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];



            var w = 500;
            var h = 100;

           var svg = d3.select("body")
               .append("svg")
               .attr("width", w)
               .attr("height", h)

           svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .text(function(d){
                   return d;
               })
               .attr("x", function(d, i){
                   return i * 21;
               })
               .attr("y", 0)
               .attr("width", 20)
               .attr("height", 100)




        </script>

Answer 1

传统上命名为i的第二个参数是元素的index。

例如：

＆＃13;

var foo = d3.select("body").selectAll(null)
  .data(["foo", "bar", "baz"])
  .enter()
  .append("foo")
  .each(function(d, i) {
    console.log("datum " + d + " has the index " + i)
  })

＆＃13;

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

＆＃13;

在你的情况下，你说：

如果我将我的示例更改为i * 2或i * 10，则矩形会变得更宽但仍然是单个

对此的解释非常简单：

如果您i * 10，则将下一个矩形10px的y位置设置为前一个矩形的右侧。但是，您将所有的宽度设置为20px。

如果您将宽度设置为较小的值，请查看会发生什么，例如8px：

＆＃13;

var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
  11, 12, 15, 20, 18, 17, 16, 18, 23, 25
];

var w = 500;
var h = 100;

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h)

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .text(function(d) {
    return d;
  })
  .attr("x", function(d, i) {
    return i * 10;
  })
  .attr("y", 0)
  .attr("width", 8)
  .attr("height", 100)

＆＃13;

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

＆＃13;

因此，由于您将所有矩形的宽度设置为20px，任何i值小于该值将使矩形显示为单个矩形：下一个矩形将绘制在前一个矩形上，并且因为他们之间没有空间。除此之外，＆＃34; fill＆＃34;之间没有区别。和＆＃34;中风＆＃34;颜色让你觉得你有一个矩形，实际上你有一堆矩形。

使用＆＃34; i＆＃34;在d3.js中的函数（d，i）中

1 个答案: