在酒窝中显示之前操作数据

Manipulating data prior to display in dimplejs

本文关键字：操作 操作数 数据 显示      更新时间：2023-09-26

我发现酒窝js中的气泡系列在缩放方面是错误的，因为它使用半径而不是面积，这使得一个数据点和另一个数据点之间的差异比看起来要大得多。

解决此问题的一种方法是将给定属性的根平方到"y"轴，但我不知道这是否可能与酒窝一起使用。请问有人可以帮忙吗？这是我的代码：

  // 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
您可以使用

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);
});
相关文章：