Разница между функцией (d) и функцией (d, i)?

Каждый D3js beginner должен пройти эту мысль, я в этом очень уверен.

Я обошел эту штуку в течение нескольких часов сейчас!!!! Но я не знаю, как ее использовать и что такое разница между ними?

function(d){return d}

function(d,i){return d and some more custom code}

для примера --- >

var data = [4, 8, 15, 16, 23, 42];

    Function(d):::::

    chart.selectAll("div")
         .data(data)
         .enter().append("div")
         .style("width", function(d) { return d * 10 + "px"; })
         .text(function(d) { return d; });

    ------------------------------------------------------------------------------------

 Function(d*i):::::

    chart.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("y", function(d, i) { return i * 20; })
        .attr("width", x)
        .attr("height", 20);

Ответы

Ответ 1

Ваш пример - хороший иллюстратор различия между ними.

В первом примере используется только d. d представляет данные, связанные с данным выбором. В этом случае создается массив из выбранных элементов div, по одному для каждого элемента в массиве data:

chart.selectAll("div")
     .data(data)
     .enter()
     .append("div")

Это не только создает массив элементов div, но и связывает данные с каждым из этих элементов. Это делается на основе "один к одному", причем каждый div соответствует одному элементу массива data. Один из них связан с "4", один с "8" и т.д.

Если я затем использую .text(function(d){...}) в массиве выборок, d будет ссылаться на данные, связанные с каждым выбранным div, поэтому, если я использую следующий метод для своих выборов:

.text(function(d) { return d; });

В каждом из моих div будет добавлен текст, значение которого равно d или данные, связанные с элементом.

Когда создается массив выборов, им также присваивается индекс в массиве. В вашем примере это соответствует положению их данных в массиве данных. Если ваша функция запрашивает как d, так и i, то i будет соответствовать этому индексу. Возвращаясь к div s, div, связанный с '4', будет иметь индекс '0', '8' будет иметь индекс '1' и т.д.

Также важно отметить, что символ, используемый в запрошенной переменной, не имеет значения. Первой переменной в вызове функции всегда являются данные, а вторая - индекс. Если я использовал метод типа

.text(function(cat,moose){ return( "data is: " + cat + " index is: " + moose)})

cat будет соответствовать данным выбора, а moose будет соответствовать индексу.

Ответ 2

Я надеюсь, что этот пример поможет вам. Это полная веб-страница, где вы можете начать играть:

<!doctype html>
<meta charset="utf-8">
<title>my first d3</title>
<body>

<script>
  var data=[10,20,30,40];

  var lis = d3.select("body")
              .append("ul")
              .selectAll("li")
              .data(data)

  lis.enter()
     .append("li")
     .text(function(d,i){ return "item n° "+i+" has value: "+d})
</script>

В основном d - это значение данных, а i - его индекс. Вы можете посмотреть здесь этот пример: http://jsfiddle.net/M8nK8/

Ответ 3

Если вы говорите о функциях обратного вызова, вы переходите к таким методам, как .attr(), тогда функция вызывается для каждого элемента в текущий выбор, где i дает вам индекс текущего элемента, но в зависимости от того, что вы делаете, вам может не понравиться этот индекс. Поэтому, хотя D3.js всегда будет вызывать вашу функцию с обоими аргументами, если вам действительно не нужен второй аргумент в конкретном случае, ваша функция не должна явно объявлять его.

JavaScript позволяет вам вызывать любую функцию с любым количеством аргументов независимо от того, сколько из них явно включено в объявление функции. Если вы вызываете функцию с меньшим количеством аргументов, чем были определены, остатки получат значение undefined. Если вы вызываете функцию с большим количеством аргументов, чем были определены, вы все равно можете получить доступ к дополнительным из функции, используя arguments object - или вы можете игнорировать их.

(Примечание: у вас должен быть строчный f в function().)