Question

我目前正在尝试为我的硕士论文在dc.js中创建一个仪表板，如果有人可以帮助的话，今天我遇到了一个真正的障碍，将不胜感激。我是Java和dc的新手，所以我会尽力解释...

我的数据格式（带有可见SSID的探针请求）：

{"vendor":"Huawei Technologies Co.Ltd","SSID":"eduroam","timestamp":"2018-07-10 12:25:26","longitude":-1.9361,"mac":"dc:d9:16:##:##:##","packet":"PR-REQ","latitude":52.4505,"identifier":"Client"}

我的数据格式（带有广播/受保护的SSID的探针请求）：

{"vendor":"Nokia","SSID":"Broadcast","timestamp":"2018-07-10 12:25:26","longitude":-1.9361,"mac":"dc:d9:16:##:##:##","packet":"PR-REQ","latitude":52.4505,"identifier":"Client"}

我正在尝试生成一个气泡图，将供应商显示为气泡（大小由该供应商收集的数据包数量表示），然后针对不受保护的X轴（任何SSID！=广播）和受Y轴绘制气泡（数据中包含“广播”的数据包）

我的意思的草图 Sketch of what I mean

到目前为止我已经设法做到的 What I've managed to get so far

我已经设法使条形图，行形图或饼形图起作用，因为它们只需要我使用一个维度并在一组中运行即可。但是我认为我从根本上误解了如何将多个维度传递给一个小组。

如果数据中存在广播，则顶部的每个

都会将新值0/1加至三倍。

然后我正在使用自定义的reducer来计数与unpro＆pro有关的0/1，这将用于绘制X / Y

我已经尝试过修改纳斯达克的例子，但是我却一无所获

代码：

queue()
 .defer(d3.json, "/uniquedevices")
 .await(plotVendor);

function plotVendor(error, packetsJson) {

  var packets = packetsJson;

  packets.forEach(function (d) {

    if(d["SSID"] == "Broadcast") {
      d.unpro = 0;
      d.pro = 1;
      } else {
        d.unpro = 1;
        d.pro = 0;
        }
      });

var ndx = crossfilter(packets);

var vendorDimension = ndx.dimension(function(d) {

return [ d.vendor, d.unpro, d.pro ];
});

var vendorGroup = vendorDimension.group().reduce(

  function (p, v) {
      ++p.count;
      p.numun += v.unpro;
      p.numpr += v.pro;
      return p;
  },

  function (p, v) {
      --p.count;
      p.numun -= v.unpro;
      p.numpr -= v.pro;
      return p;
  },

  function () {
      return {
          numun: 0,
          numpr: 0
      };
  }
);

var vendorBubble = dc.bubbleChart("#vendorBubble");
vendorBubble
    .width(990)
    .height(250)
    .transitionDuration(1500)
    .margins({top: 10, right: 50, bottom: 30, left: 40})
    .dimension(vendorDimension)
    .group(vendorGroup)
    .yAxisPadding(100)
    .xAxisPadding(500)

    .keyAccessor(function (p) {
  return p.key[1];
})
    .valueAccessor(function (p) {
  return p.key[2];
})
    .radiusValueAccessor(function (d) { return Object.keys(d).length; 
})

    .maxBubbleRelativeSize(0.3)
    .x(d3.scale.linear().domain([0, 10]))
    .y(d3.scale.linear().domain([0, 10]))
    .r(d3.scale.linear().domain([0, 20]))

dc.renderAll();

};

这里是一个小提琴：http://jsfiddle.net/adamistheanswer/tm9fzc4r/1/

Answer 1

我认为您正在汇总正确的数据，而丢失的位是

您的访问器应在value内部（交叉过滤器在此处聚集）

.keyAccessor(function (p) {
  return p.value.numpr;
})
.valueAccessor(function (p) {
  return p.value.numun;
})
.radiusValueAccessor(function (d) {
  return d.value.count; 
})

您的密钥应该只是供应商-交叉过滤器尺寸不是几何尺寸，而是您要对其进行过滤和分类的尺寸
```
var vendorDimension = ndx.dimension(function(d) {
  return d.vendor;
});
```

您可能需要初始化count，因为++undefined是NaN：

function () { // reduce-init
  return {
    count: 0,
    numun: 0,
    numpr: 0
  };
}

费力的叉子，添加了所有依赖项，禁用了包装功能，并启用了ElasticX / elasticY（可能不是您想要的，但更容易调试）：

https://jsfiddle.net/gordonwoodhull/spw5oxkj/16/

dc.js气泡图-多维分组问题，无法使自定义减速器正常工作

1 个答案: