Question

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

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

Sub Button6_Click()
Dim strUserValue    As String
    ' Ask user to enter a value. If you need values for several cells, then either
    ' ask several questions, or pars the value they enter (i.e. 'John:Doe:Jr.' could
    ' be split into three cells.
    strUserValue = InputBox("Enter Value", "Provide value for cells")
    Sheets("Results").Range("C5").Select                ' You are selecting this row & column
    ActiveCell.EntireColumn.Insert Shift:=xlRight       ' This shifts the column right
    ActiveCell.Offset(1).EntireRow.Insert               ' This inserts a new row relative to where you are (Active cell)
    Cells(6, 3) = strUserValue                          ' What row / column do you want to enter data in????
End Sub

这是一个带有我的代码的JSFiddle。

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

Answer 1

我能从朋友Shirley Wu那里得到一些建议（谢谢！），她指出问题是每次viz更新时，都会调用图表功能，这样就可以了但我在我的图表功能中有这个部分：svg.append（＆＃34; g＆＃34;）。

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

解决方案是：（1）仅在第一次创建一个g元素，并记住它对图表函数的任何后续调用，或（2）在图表函数中创建g元素，然后有一个单独的更新函数，它接受该g元素并更新其中的路径

我使用选项1并在图表函数中编辑了部分，如下所示：为了不每次都创建一个新g：

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可重复使用的圆形热图无法成功更新

1 个答案: