D3可重复使用的圆形热图无法成功更新 [英] D3 reusable circular heat chart cannot successfully update

问题描述

我正在使用D3可重用图表框架创建一个圆形热图以可视化声学数据.我无法成功更新数据.当我尝试更新数据而不是更新现有g元素中的路径时，它将绘制新的g元素.我创建了两个图表，只是为了查看我的可重用框架是否有效，并且仅在第一个图表上测试数据更新.由于某些原因，当我尝试更新第一个图表时，颜色也会更改为第二个图表的颜色.这是问题的图像:

I am using the D3 reusable chart framework to create a circular heat chart to visualize acoustic data. I am not able to successfully update the data. When I try to update the data instead of updating the paths in the existing g element it draws new g elements. I created two charts just to see if my reusable framework works, and am testing data update only on the first chart. For some reason when I try to update the first chart, the colors also change to that of the second chart. Here is an image of the problem:

我认为问题可能与我如何创建svg和g元素有关，但是我无法弄清楚具体的问题是什么.在我的可重用模块中，这就是创建svg和元素以及细分的方法:

I think the problem may related to how I am creating the svg and g elements, but I can't figure out what the specific problem is. In my reusable module this is how I am creating the svg and elements and the segments:

svg.enter().append("svg")
            .classed("chart", true)
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);


        var g = svg.append("g")
            .classed("circular-heat"+_index, true)
            .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");

        var segments = g.selectAll("path").data(data);

这是我的代码的JSFiddle.

And here is a JSFiddle with my code.

https://jsfiddle.net/jhjanicki/s3gsae5p/1/

推荐答案

我能够从朋友Shirley Wu(谢谢！)那里得到一些建议，她指出问题在于每次viz更新时，它调用了图表函数，没关系，但是我的图表函数中包含以下部分:svg.append("g").

I was able to get some advice from a friend, Shirley Wu (thank you!), and she pointed out that the problem is that every time the viz updates, it's calling the chart function, which is ok but I have this part in my chart function: svg.append("g").

这意味着每次调用该图表时，都会添加一个新的g元素，而不是使用已存在的g元素.这就是为什么每次创建新路径集的原因，因为我创建了一个新的g，然后每次都用路径填充它.

Which means that every time that chart is called, a new g element is appended instead of using the one that already exists. That's why I was getting a new set of paths every time, since I was creating a new g and then filling that with paths every time.

解决方案是: (1)仅在第一次创建g元素，并在随后对图表函数的任何调用中记住该元素，或者 (2)在图表函数中创建g元素，然后有一个单独的update函数，该函数采用该g元素并更新其中的路径

The solution is to either: (1) Create a g element only the first time around, and remember it for any subsequent calls to the chart function, OR (2) Create the g element in the chart function, and then have a separate update function that takes that g element and updates the paths within it

我使用选项1并按如下所示编辑了图表函数中的零件，以免每次都不创建新的g:

I used option 1 and edited the part within the chart function as the following in order not to create a new g every time:

if(svg.select('g.circular-heat')[0][0] == null){
                var g = svg.append("g")
                    .classed("circular-heat", true)
                    .attr("transform", "translate(" + parseInt(margin.left + offset) + "," + parseInt(margin.top + offset) + ")");
            }

这是更新的小提琴 https://jsfiddle.net/jhjanicki/h93ka17y/

这篇关于D3可重复使用的圆形热图无法成功更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！