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

在 dimplejs 中显示之前处理数据

Manipulating data prior to display in dimplejs

javascript

d3.js

dimple.js