在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); 
});