Обновление данных в d3.js группы

создать группу со значениями данных:Обновление данных в d3.js группы

var group = svg.append("g"); 
group.data([{color : "green", opacity: 0.3 }]);

Если я хочу обновить эти значения, нужно ли мне установить новый массив данных?

group.data([{color : "blue", opacity: 0.3 }]);

Или может я что-то перебирать и обновлять значения внутри группы, как:

group.data.foreach(d, function() { return d.color = "blue"; })

или

group.data.foreach(d, function() { return d.opacity += 0.5; })

Мой прецедентом является то, что у меня есть группа с прямоугольником и круг. И у группы есть данные.

var group = svg.append("g"); 
group.data([{color : "green", opacity: 0.3 }]); 

var line = group.append("rect"); 
line.attr("x", self.xWorldToGraph(xx) - self.lineWidth/2) 
    .attr("y", self.yWorldToGraph(yy)) 
    .attr("width", self.lineWidth) 
    .attr("height", height) 
    .style("stroke", function(d) { return d.color; }) 
    .style('stroke-opacity', function(d) { return d.opacity; }) 

group.append("circle") 
    .attr("cx", self.xWorldToGraph(xx)) 
    .attr("cy", self.yWorldToGraph(yy)) 
    .attr("r", 50) 
    .style("stroke", function(d) { return d.color; }) 
    .style('stroke-opacity', function(d) { return d.opacity; })

Теперь я хочу обновить цвет группы, чтобы круг и прямоугольник меняли цвет.

источник

2015-12-09 Taufik Hidayat

Это будет делать group.data() Еогеасп (г, функция() {возвращение d.color = "синий";}) – Cyril

Как сообщить d3, что значение в данных было обновлено? –

Я не смогу ответить на это, так как есть много способов, я думаю, вам нужно прозрение здесь http://bl.ocks.org/mbostock/3808218 – Cyril

d3 не будет «автоматически» перерисовываться после выключения данных. Вы должны «сказать», что данные изменились, снова вызвав функции .style (в шаблоне ввода, обновления, выхода, это обновление).

Вот пример использования кода:.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 500) 
 
     .attr('height', 500); 
 

 
    var group = svg.append("g"); 
 
    
 
    group.data([{ 
 
     color: "green", 
 
     opacity: 0.3 
 
    }]); 
 

 
    group.append("circle") 
 
     .attr("cx", 100) 
 
     .attr("cy", 100) 
 
     .attr("r", 50) 
 
     .style("stroke-width", 30) 
 
     .style("stroke", function(d) { 
 
     return d.color; 
 
     }) 
 
     .style('stroke-opacity', function(d) { 
 
     return d.opacity; 
 
     }); 
 
     
 
    var colors = d3.scale.category20(); 
 
    var i = 0; 
 

 
    function changeColor() { 
 
     group.data().forEach(function(d) { 
 
     d.color = colors(i); 
 
     }); 
 
     group.selectAll('circle').style("stroke", function(d) { 
 
     return d.color; 
 
     }) 
 
     i++; 
 
    } 
 

 
    setInterval(changeColor, 1000); 
 

 
    </script> 
 
</body> 
 

 
</html>

источник

2015-12-09 18:50:04 Mark

Обновление данных в d3.js группы

ответ

Смежные вопросы