如何为本地 geojson 文件绘制 d3 气泡图

Question

我想绘制 d3 气泡图。以 d3 为例 This link 我试图获取本地文件的气泡图，即 myfile.geojson。我试过的代码在 plunker link 中。我想根据值 "Profit" 绘制气泡图。尝试了 google 和 youtube 中的所有内容，但我没有找到问题的解决方案。 Plunker link
我是 d3 的新手。如果我在代码中有任何错误，请建议我改正它们。提前致谢。

Answer 1

您的数据与 flare.json 大不相同，因此复制递归代码不会生成您的数据。您的数据集非常简单，不需要递归来展平数据集。

function classes(root) {
  var classes = [];

  function recurse(profit, node) {
    if (node.profit) node.profit.forEach(function(child) { recurse(node.profit, child); });
    else classes.push({packageName: type, className: node.profit, value: node.profit});
  }

  recurse(null, root);
  return {features: classes};
}

这应该是：

function classes(root) {
  var classes = root.features.map(function(f, i) {
    //here i is the index
    return {
      value: f.properties.profit,
      className: "Hello" + i,////just giving some dummy values
      packageName: i//just giving some dummy values
    }
  });
  return classes;
}

现在像这样将此数据传递给气泡布局：

var node = svg.selectAll(".node")
        .data(bubble.nodes({
          children: classes(root)
        }).filter(function(d) {
          return !d.children;
        }))
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) {

          return "translate(" + d.x + "," + d.y + ")";
        });

编辑

气泡图根据利润值：

圆的半径取决于您在 classes function.

中给出的值

return {
          value: f.properties.profit,
          className: "Hello" + i,////just giving some dummy values
          packageName: i//just giving some dummy values
        }

因此值越大或f.properties.profit半径越大。半径将相对于您在此处设置的直径：

 var bubble = d3.layout.pack()
      .sort(null)
      .size([diameter, diameter])

读取 d3 中的域范围 https://www.dashingd3js.com/d3js-scales

代替 className 和 packageName 我应该给什么来获得基于利润值的气泡图。

这个我不知道怎么回答我觉得你的概念不清楚所以是天真的问题。

如果你看到代码 packageName 定义了颜色

.style("fill", function(d) {
          return color(d.packageName);
        });

className 定义要在气泡中显示的文本

   .text(function(d) {
      return d.className;
    });

请看fiddle中的代码，非常简单易懂。

工作代码here.

如何为本地 geojson 文件绘制 d3 气泡图

how to draw a d3 bubble chart for a local geojson file

charts

geojson

d3.js