2

我从这里使用平行坐标系：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>

当我调用 reload 函数时，我得到一个错误：TypeError: selection[0][0] is null。

我应该如何进行？

我从这里阅读了有关动态更改数据的信息，但无法弄清楚在这种情况下如何应用它。

4

2 回答 2

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)    
}
于 2014-12-09T15:03:34.093 回答
1

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

例如：

清空图表

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

并用新数据重新填充它

parcoords
    .data(data)
    .dimensions(generateParcoordsDimensions())
    .render()
    .updateAxes();

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

于 2016-07-11T13:23:39.980 回答