將對象的屬性轉換為數組

Question

我正在使用D3創建氣泡圖，並且可以使用虛擬數據很好地構建該圖表，但是當我嘗試使用實時數據時，該圖表將無法工作。 我了解為什么它不起作用，這是因為數據以D3的錯誤格式傳入。 我只是不知道如何使用JavaScript重新組織數據。

我的數據存儲在這樣的對象中：

datas = {fieldA:[Array[32]], fieldB[Array[32]]};

屬性內部的Array看起來像這樣：

Array[Object,Object,Object...]

我需要的數據是對象數組中稱為raw_data的屬性

因此，訪問其中一個數據點將看起來像這樣：

datas.fieldA[0].raw_data

我需要像這樣訪問數據：

datas[0].fieldA.raw_data

這將允許我在D3 viz中綁定datas ，並且可以訪問fieldA和fieldB。 現在，我可以綁定datas.fieldA，這是一個問題，因為我需要兩個字段來創建viz。

如果有幫助，下面是我正在編寫的實際d3代碼。 我可以創建圓圈，但是現在需要在圓圈上添加文字。 真實的字段名稱是字詞和字詞。

    var h = options.dataset.chart_information.height;
    var w = options.dataset.chart_information.width;
    var margin = {left:5, right:5, top:5, bottom:5};
    var dataWord = options.dataset.data.countword;
    var dataText = options.dataset.data.word;



    var simulation = d3.forceSimulation()
                        .force("x", d3.forceX(w/2).strength(0.05))
                        .force("y", d3.forceY(h/2).strength(0.05))
                        .force("collide", d3.forceCollide(function(d) { return rScale(d.raw_data) + 0.2; }));

    var rScale = d3.scaleSqrt()
                    .domain([d3.min(dataWord, function(d) { return d.raw_data; }), 
                            d3.max(dataWord, function(d) { return d.raw_data; })])
                    .range([10,60]);

    var svg = d3.select(options.divSelector)
                .append("svg")
                .attr("height",h)
                .attr("width",w);

    var circles = svg.selectAll(".circle")
                    .data(dataWord)
                    .enter()
                    .append("circle")
                        .attr("r", function(d) { return rScale(d.raw_data); })
                        .attr("fill","steelblue");

    simulation.nodes(dataWord)
                .on("tick", ticked);

    function ticked() {
        circles
            .attr("cx", function(d) { return d.x })
            .attr("cy", function(d) { return d.y });
    };

Answer 1

這是對陣列起作用的功能方法。 請注意，結果中的對象數將是所有字段（在這種情況下為fieldA和fieldB）的最小值。 如果字段長度不同，那只會是一個問題。 我在兩者之間放了一些console.log ，以解釋該步驟。 顯然，這些日志和變量分配不是必需的-代碼可以縮短…… Object.assign是ES2015（ES6）代碼-如果這是一個必須替換的問題，也許像這里

 var datas = {fieldA:[ { rawdata:'a1'}, { rawdata:'a2' }, { rawdata:'a3' } ], fieldB: [ { rawdata:'b1'}, { rawdata:'b2'} ]}; // transform each field to contain it's name var fields = Object.keys(datas).map(function(fieldName) { return datas[fieldName].map(function(value) { let object = {}; object[fieldName] = value; return object; }); }); console.log(fields); // use d3.zip to transpose var zipped = d3.zip.apply(null, fields); console.log(zipped); // merge objects in array var result = zipped.map(function(objects) { return Object.assign.apply(null, objects); }); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

Answer 2

如果我理解正確。 您有一個這樣格式化的對象：

datas = {fieldA:[{raw_date:0}, {raw_date:1}], fieldB[{raw_date:0}, {raw_date:1}]};

您想將其轉換為以下格式的數組：

datas = [{fieldA:{raw_date:0, raw_date:1}, {fieldB{raw_date:0, raw_date:1}}];

在這種情況下，您可以執行以下操作：

 var org = {fieldA:[{raw_data:0}, {raw_data:1}], fieldB:[{raw_data:0}, {raw_data:1}]}; var reformatted = []; for(var i = 0; i < Math.min(org.fieldA.length, org.fieldB.length); i++){ reformatted.push({filedA:{raw_data:org.fieldA[i].raw_data}, fieldB:{raw_data:org.fieldB[i].raw_data}}); } console.log(reformatted); 

Answer 3

var datas= {
    fieldA: [1, 2, 3],
    filedB: [4, 5, 6]
};

var array = $.map(datas, function(value, index) {
    return [value];
});