Question

我有很多数据，从csv中提取并分类为整齐的类别，如下所示：

return {
                time: d3.time.format('%Y/%m/%d %H:%M:%S').parse(d.Time),
                conditions: d.Conditions.replace(/"/g, ''),
                temperature: +d.Temperature,
                humidity: +d.Humidity.replace(/[",%]/g, ''),    
                windDir: d.WindDir,                             
                windDeg: +d.WindDeg,                            
                pressure: +d.Pressure.replace(/"/g, '')
}

我希望获得类似于＆＃39;小堆叠倍数＆＃39;的最终结果。（http://bl.ocks.org/mbostock/9490516）。查看代码，它使用符号和嵌套来实现多个图形。但是，我的数据没有以相同的方式构建;我在一列中没有多个不同的符号。如果我想使用全部或部分变量，我该如何复制这个结果？

我确实试图摆弄nest（）函数，并实现了一个数组，其中时间是关键，温度是值：

d3.nest().key(function(d) {return d.time;})
    .rollup(function(d) {return d3.sum(d, function(g) {return g.temperature;}); })
    .entries(dataset)

...但是这并没有给我每次我想要的多个值（并且可能需要小堆叠示例）。

为了澄清我现在的情况，这里是我的域/范围/轴定义：

    var x = d3.time.scale()
        .range([0, width]);
    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis().scale(x)
        .orient("bottom")
        .ticks(10);
    var yAxis = d3.svg.axis().scale(y)
        .orient("left")
        .ticks(7);

    x.domain(d3.extent(dataset, function(d) { return d.time; })); 
    y.domain([d3.min(dataset, function(d) { return Math.min(d.temperature - 5, d.absHumidity - 1); }), d3.max(dataset, function(d) { return d.temperature + 2; })]);

我的svg.append：

var svg = d3.select('body')
        .append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
        .append('g') 
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

Answer 1

没有内在的数据嵌套需求，这或多或少只是实现这种情况所需的便捷方式。对于你的数据，你已经有了某种嵌套，它只是不太明确。

一般方法是嵌套结构决定显示的内容。也就是说，对于每个图形，外部嵌套中存在一个“事物”。在您的情况下，这些是不同的度量，因此您需要一个包含以下内容的数组：

var symbols = ['temperature', 'humidity', 'windDeg', 'pressure', 'absHumidity'];

其他一切都是如此。为每个元素添加一个图形最直观（尽管不是特别的D3方式）是简单地遍历数组：

symbols.forEach(function(symbol) {
  // ...
});

在循环内部，相关数据由symbol给出，作为数据数组的索引，例如

y.domain(d3.extent(dataset, function(d) { return d[symbol]; }));

处理数据的所有内容都需要以这种方式访问它。这基本上就是这样;完整演示here。

要更改显示的内容，您需要做的就是编辑symbols数组 - 每个元素表示要显示的测量的属性名称。

如果您希望特定部分（例如x轴）仅显示在其中一个图形上，请将创建它的代码包装在if语句中，以便检查例如当前symbol。

在d3js中堆叠多个折线图而不嵌套数据

1 个答案: