Question

我有一个复杂的可视化，它使用从大量.tsv文件解析的数据（10.2 MB !!）。它是原始.wav文件数据，因此.tsv中的行数为数十万。我构造形状的方式是使用d3路径。由于这些线的剪切数，路径技术导致外观呈现实体形状，如下面的代码+图片所示。

    d3.tsv('wav_1.tsv', function (error, rawData) {
        var data = rawData.map(function (d) {
            return {y2: +d.wav1}
        });

    var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
    var y = d3.scale.linear().domain([-.02, .02]).range([h, 0]);
    var line = d3.svg.line()
        .x(function(d,i) {
            return x(i);
        })
        .y(function(d) {
            return y(d.y2);
        })

        var graph = d3.select("#graph").append("svg:svg")
              .attr("width", w + m[1] + m[3])
              .attr("height", h + m[0] + m[2])
            .append("svg:g")
              .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

        var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
        graph.append("svg:g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + h + ")")
              .call(xAxis);

        var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
        graph.append("svg:g")
              .attr("class", "y axis")
              .attr("transform", "translate(-25,0)")
              .call(yAxisLeft);

        graph.append("svg:path").attr("d", line(data));

}）;

很酷，我的意思是我会觉得它很酷，但在使用它之后我有两个很大的理由去寻找其他地方：

Ghz资源，可视化在浏览器中加载大约需要2秒钟，我觉得对于任何静态图形而言都太长了。也许通过使用多边形/不规则形状/面积图可以改进吗？
我无法控制形状的填充。就目前而言，没有填充。填充的错觉是所有线条的混乱的结果。这意味着如果我想用渐变，不透明或纹理/图案来设计风格，我大部分都不会运气。然而，我的预感是，如果形状可以某种方式用区域风格的渲染来表示，那么这种填充样式将更加可行。

这就是它的关键所在。如果有的话，我不知道这种形状可以简化多少。但我的目标是保持形状的大致轮廓，我不介意在这里和那里失去一些优势，如果它意味着改善上述问题。

就像一个有趣的比较，看看soundcloud如何可视化他们的媒体：

他们似乎将数据放入箱子并使用rects来简化事情。我并不反对这种方法，但正如我的帖子标题所示，我对1个实体形状更感兴趣，因此我可以更好地控制填充样式。

我很好奇建议采用什么方法，是否是d3的专用方法之一，或者是否建议在数据级别操作更多。我对任何事情都持开放态度，请随时与我进行头脑风暴。

感谢您阅读！

查找复杂形状/大型数据集可视化方法的概述

0 个答案: