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

您无需删除图表即可进行更新。您可以清空维度和数据属性，重新填充它们，然后更新图表。

例如：

清空图表

uploads/

并用新数据重新填充

parcoords
      .dimensions({})
      .data([])
      .render();

保留所有其他设置，因此您无需再次设置.color或.mode。

Answer 2

我也一直在尝试使用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)    
}

动态更新并行坐标数据

2 个答案: