未拾取 D3 数组对象格式

Question

我试图让 D3 理解对象中的数组，以便 D3 识别要创建两个元素，一个用于 10，一个用于 6。

如果我有一个标准数组，例如var myobj = [10,6]; D3 很好地理解了这一点并创建了两个元素。但是，如果数组嵌入到如下对象中，则 D3 不会这样做。我的问题是 a) 为什么 D3 不明白这一点？ b）我怎样才能让 d3 明白我想要创建两个元素？我看过 d3.nested() 但我不明白。

感谢任何帮助

var myobj = 
    [
        {myarray:[10,6]}

    ];

  xx.selectAll(".newrec")
                .data(myobj)
                .enter()
                .append("rect")
                    .attr("class","newrec")
                    .attr("width",function (d) {return d.myarray;  }) //for width D3 returns one element rectangle with width of "10,6" which is not a width!
                    ;

Answer 1

如果您不想更改数据结构，可以执行以下操作：

var myobj = [ {myarray:[10,6,7]} ];

d3.selectAll(".newrec")
    .data(myobj[0].myarray)
    .enter()
    .append("rect")
    .attr("class","newrec")
    .attr("width",function (d) {console.log(d); return d});

这将创建 3 个具有适当宽度的 rects，例如：http://jsfiddle.net/henbox/f3vqp7ct/

Answer 2

要了解 D3 如何处理这些数据：

var myobj = 
[
    {myarray:[10,6]}

];

console.log(myobj);

当您使用浏览器时：

你可以看到myobj是一个对象，里面有一个对象和一些属性（例如长度）。

现在将该对象分解为各个部分：

console.log(myobj);
console.log(myobj[0]);
console.log(myobj[0].myarray);
console.log(myobj[0].myarray[0]);

还有浏览器：

这有望帮助您理解您的第一个问题，我认为这将使其余的问题开始变得有意义。请记住这一点：您可以将 D3 中的所有（大多数？）数据和 var 视为对象。

我认为这是一个很好的例子来说明如何使用d3.nest，如果你愿意的话：

有一个trial.csv 文件

position,value
"Outer",100
"Inner",10
"Inner",6

“外部”和“内部”表示嵌套位置。

现在通过“位置”嵌套-键，然后对每个键的“值”求和（除了求和之外，您可能还想做其他事情）：

d3.csv("trial.csv", function(error, csv_data) {
    var data = d3.nest()
        .key(function(d) { return d.position; })
        .rollup(function(d) {
            return d3.sum(d, function(i) { return i.value; });
        }).entries(csv_data);

    console.log(data);
    console.log(data[0]);
    console.log(data[1]);
})

前往浏览器：

希望这会有所帮助！

Answer 3

我认为你必须以其他方式来做。

var myarray = 
[
    {myObject:10, ...},
    {myObject:6, ...}
];

xx.selectAll(".newrec")
            .data(myobj)
            .enter()
            .append("rect")
                .attr("class","newrec")
                .attr("width",function (d, i) {return d.myarray[i].myObject;  }) //for width D3 returns one element rectangle with width of "10,6" which is not a width!
                ;