d3.js набор атрибутов в v4

Обновить

December 2018

Просмотры

1.2k раз

2

Следующий код работает в D3 v3 , но не работает в v4 :

function render(data) {
  //bind
  var cirs = svg.selectAll('circle').data(data);

  //enter
  cirs.enter().append('circle').attr('r', 2);

  //update
  cirs.attr('cx', function(d) {
    return d.x
  })
  .attr('cy', function(d) {
    return d.y
  });

  //exit
  cirs.exit().remove();
}

Мои данные:

var objects = [
  {x: 100, y:100},
  {x: 70, y: 90},
  {x: 181, y: 105},
  {x: 80, y: 60},
  {x: 160, y: 120},
  {x: 168, y: 182},
  {x: 95, y: 110}
]
render(objects);

Я обнаружил , что cxи cyне установлены.

Есть новый способ установить атрибуты в версии 4?

1 ответы

1

Изменения для v4 есть ответ:

Нет Кроме того, выбор .append больше не сливается ввода узлов в выборе обновлений; использовать выбор .merge объединить ввод и обновление уже через данные соединения.

Таким образом, ваш выбор обновления будет пустым и звонки никогда .attr()не будут выполнены в результате недостающих значений атрибутов.

Для вашего кода, чтобы работать, вам просто нужно объединить введенные ранее круги в выборе обновления:

function render(data) {
  //bind
  var cirs = svg.selectAll('circle').data(data);

  //enter
  var enter = cirs.enter().append('circle').attr('r', 2);

  //update (including merged enter selection)
  var update = cirs.merge(enter); // Merge the enter selection into the update selection
  update.attr('cx', function(d) {
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    });

  //exit
  cirs.exit().remove();
}

var svg = d3.select('body').append('svg')
  .attr('width', 250)
  .attr('height', 250);

function render(data) {
  //bind
  var cirs = svg.selectAll('circle').data(data);

  //enter
  var enter = cirs.enter().append('circle').attr('r', 2);

  //update (including merged enter selection)
  var update = cirs.merge(enter); // Merge the enter selection into the update selection
  update.attr('cx', function(d) {
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    });

  //exit
  cirs.exit().remove();
}

var objects = [{
  x: 100,
  y: 100
}, {
  x: 70,
  y: 90
}, {
  x: 181,
  y: 105
}, {
  x: 80,
  y: 60
}, {
  x: 160,
  y: 120
}, {
  x: 168,
  y: 182
}, {
  x: 95,
  y: 110
}];

render(objects);
<script src="https://d3js.org/d3.v4.js"></script>