Question

我发现凹坑js中的气泡系列在缩放时是错误的，因为它使用半径而不是面积，这使得一个数据点与另一个数据点之间的差异大得多。

解决这个问题的一种方法是通过root平方给定属性＆＃39; y＆＃39;轴，但我不知道这是否可能与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。 e.g：

// 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中显示之前操作数据

1 个答案: