更新d3.js组中的数据 [英] Update data in d3.js group
问题描述
我创建了一个包含数据值的组：
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返回d.color;}）
.style（'stroke-opacity'，function（d）{return d.opacity;}）
解决方案现在我想更新组的颜色，使圆和矩形也改变颜色。在切换数据后，
d3不会自动重绘。你必须通过调用.style函数（在输入，更新，退出模式，这是一个更新）告诉数据已更改。
以下是使用您的代码的示例：
<！DOCTYPE html& ; html>< head> < script data-require =d3@3.5.3data-semver =3.5.3src =// 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>
I create a group with data values:
var group = svg.append("g"); group.data([{color : "green", opacity: 0.3 }]);If I want to update these values, do I need to set a new data array?
group.data([{color : "blue", opacity: 0.3 }]);Or can I somehow iterate and update the values inside the group, like:
group.data.foreach(d, function() { return d.color = "blue"; })or
group.data.foreach(d, function() { return d.opacity += 0.5; })My use case is that I have a group with a rectangle and a circle. And the group has data in it.
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; })Now I want to update the group color so the circle and rectangle also change color.
解决方案
d3won't "auto" redraw after you switch out data. You have to "tell" it the data has changed by calling the .style functions again (in the enter, update, exit pattern, this is an update).Here's an example using your code:
<!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" 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>
这篇关于更新d3.js组中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
