javascript - 动态更新平行坐标数据

Question

我正在使用这里的平行坐标系:http://syntagmatic.github.io/parallel-coordinates/

我在开始时使用 onload 加载 csv 文件:

onload="loadVisualization('./csv/DataSet1.csv')"

并且想要通过单击按钮从另一个 csv 文件重新加载数据。

<script>

    var parcoords = d3.parcoords()("#NetworkData").alpha(.1)

function loadVisualization(source)
{
    parcoords = d3.parcoords()("#NetworkData").alpha(.1)
    d3.csv(source, function(data) 
    {
         parcoords
         .data( data.map(function(d) 
              { 
                  return {  "Time":        d3.time.format("%H:%M:%S").parse(d.Time),                                    
                            "Source":      (d.Source),
                            "Destination": (d.Destination),
                            "Protocol":    (d.Protocol),
                            "Length":      (d.Length),
                            "Destination Port": (d.DestPort),
                         } 
              }) )
        .color( "steelblue" )
        .mode("queue")
        .render()
        .reorderable()
        .interactive() 
        .brushable();  
    });
}

function reloadNewData()
{
    // Delete all data and reload from new source
    d3.select("#NetworkData").remove();
    source = './csv/DataSet_New.csv'
    loadVisualization(source)    
}

</script>

当我调用重新加载函数时，出现错误:TypeError: Selection[0][0] is null。

我应该如何进行？

我从 here 读到有关动态更改数据的信息，但不知道如何在这种情况下应用它。

Answer 1

我也一直在尝试将 parcoords.js 与动态数据结合使用。在 loadVisualization 函数的开头，我将 NetworkData div 的innerHTML 设置为“”。我没有 reloadNewData 函数，但您应该能够清除 NetworkData，如下所示。

function reloadNewData()
{
    // Delete all data and reload from new source
    // d3.select("#NetworkData").remove();
    document.getElementById("NetworkData").innerHTML = "";
    source = './csv/DataSet_New.csv'
    loadVisualization(source)    
}