在dimplejs中顯示之前處理數據

Question

我發現dimple js中的氣泡系列在縮放時出現錯誤，因爲它使用半徑而不是區域，這使得一個數據點與另一個數據點之間的差異比看起來大得多。

解決這個問題的一種方法是將給定的屬性平方根設置爲'y'軸，但我不知道這是否可以與dimplejs一起使用。任何人都可以幫忙嗎？這裏是我的代碼：

// First one is the code without squaring z. 
    var svg = dimple.newSvg("#chartContainer", 500, 500); 
    d3.csv("xyz.csv", function (data) { 
    var chart = new dimple.chart(svg, data); 
    chart.addCategoryAxis("x", "x"); 
    chart.addMeasureAxis("y", "y"); 
    chart.addMeasureAxis("z", "z"); 
    chart.addSeries(null, dimple.plot.bubble); 
    chart.draw(); 
    }); 

    // Second block is supposed to be with squared z. 
    var svg2 = dimple.newSvg("#chartContainer2", 500, 500); 
    d3.csv("xyz.csv", function (data) { 
    var chart2 = new dimple.chart(svg2, data); 
    chart2.addCategoryAxis("x", "x"); 
    chart2.addMeasureAxis("y", "y"); 
    // How to manipulate 'z' data here before passing it to the code below? 
    chart2.addMeasureAxis("z", "zsquare"); 
    mySeries = chart2.addSeries(null, dimple.plot.bubble); 
    chart2.draw(); 
    mySeries.shapes.selectAll("circle").attr("r", 3); 
    }); 

爲了測試的緣故，CSV文件可能是這樣的：

x,y,z,zsquare 
1,1,1,1 
2,2,2,1.414 
3,3,3,1.732 
4,4,4,2 
5,5,5,2.236 

Answer 1

你可以使用一個map功能來修改你的data。例如：

// Second block is supposed to be with squared z. 
var svg2 = dimple.newSvg("#chartContainer2", 500, 500); 
d3.csv("xyz.csv", function (data) { 

    data = data.map(function(datum) { 
     if(datum.zsquare) { 
      datum.zsquare = datum.zsquare * 2; // Manipulate your zsquare here 
     } 
     return datum; 
    }); 

    var chart2 = new dimple.chart(svg2, data); 
    chart2.addCategoryAxis("x", "x"); 
    chart2.addMeasureAxis("y", "y"); 
    chart2.addMeasureAxis("z", "zsquare"); 
    mySeries = chart2.addSeries(null, dimple.plot.bubble); 
    chart2.draw(); 
    mySeries.shapes.selectAll("circle").attr("r", 3); 
});