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!
                ;