Вопросы Теги

Управление элементами путем привязки новых данных

Я пытаюсь понять, как обновить некоторые элементы D3.js, просто привязав новые данные. Я не совсем уверен, возможно это или нет, но похоже, что так должно быть.

Итак, сначала я создал четыре круга SVG и установил смещение cx как функцию данных: 

 <body><div id="container"></div></body>

 var svg = d3.select("div.container").append("svg")
     .attr("class", "chart")
     .attr("width", 1000)
     .attr("height", 500);

  // Create initial data and display
  var data = [0, 10, 20, 30];
  var circle = svg.selectAll("circle")
      .data(data)
      .enter()
      .append('circle')
      .attr("cx", function(d) {
        return d*10;
      })
      .attr("cy", 100)
      .attr("r", 10)
      .style("fill", "steelblue");

Затем я прикрепляю новые данные и переход. Я ожидал, что круги будут медленно перемещаться к новому положению (это то, чего я пытаюсь достичь), но этого не происходит: 

  var data1 = [40, 50, 60, 70];
  circle.data(data1).transition().duration(2500);

Я делаю основную ошибку? Возможно, я ошибся в выборе. Или просто невозможно обновить элементы только путем манипулирования данными?

ОБНОВЛЕНИЕ: если я сделаю console.log (circle) , то увижу массив элементов круга SVG, чего я и ожидал .

17
задан Phrogz 1 March 2012 в 17:54
поделиться