Я создал этот массив:

var lineData = [ { "x": 25,   "y": 75},  { "x": 85,   "y": 130},
             { "x": 140,  "y": 190}, { "x": 195,  "y": 245},
             { "x": 195,  "y": 300}, { "x": 25,  "y": 350},
             { "x": 80,  "y": 405}, { "x": 195,  "y": 460}];

Теперь я хочу нарисовать эллипсы по координатам в массиве. Как мне создать функцию, которая будет обращаться к значениям x и y? Как работают функции?

// Draw ellipses 
var circle = svgContainer.append("ellipse")
    .attr("cx", function(d) { return d.x; }})
    .attr("cy", function(d) { return d.y; })
    .attr("rx", 5)
    .attr("ry", 5);
1
marcos 29 Май 2017 в 02:20

2 ответа

Лучший ответ

Использование цикла для доступа к данным (как в принятом ответе) в коде D3 является ужасным не идиоматично .

Вам не нужен цикл. Просто свяжите данные и используйте выбор «ввод», получая доступ к данным для каждого круга с первым параметром анонимной функции: это знаменитый function(d) в D3. Когда вы делаете это ...

.attr("cx", function(d){ return d.x})
//first parameter ---^

... данные для каждого элемента будут переданы в функцию attr. Если вы хотите знать, вторым параметром является индекс, а третьим параметром является текущая группа. Кроме того, фактическое имя параметра не имеет значения, только его порядок.

Вот пример использования ваших данных:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 500);
  
var lineData = [ { "x": 25,   "y": 75},  { "x": 85,   "y": 130},
  { "x": 140,  "y": 190}, { "x": 195,  "y": 245},
  { "x": 195,  "y": 300}, { "x": 25,  "y": 350},
  { "x": 80,  "y": 405}, { "x": 195,  "y": 460}];
             
var ellipses = svg.selectAll("faraday")
  .data(lineData)
  .enter()
  .append("ellipse")
  .attr("cx", function(d){ return d.x})
  .attr("cy", function(d){ return d.y})
  .attr("rx", 5)
  .attr("ry", 5)
  .attr("fill", "teal");
<script src="https://d3js.org/d3.v4.min.js"></script>
5
Gerardo Furtado 29 Май 2017 в 05:26

Вы можете использовать метод forEach, чтобы пройти через каждый элемент в массиве и получить значения в каждом.

lineData.forEach(function(d) {
    // Draw an elipse
});

Поместите свой код в скобки, используйте d.x и d.y для доступа к координатам в каждом элементе в массиве.

-1
Matthew W. 28 Май 2017 в 23:25