Question

我想绘制一个d3气泡图。以d3为例 This link 我试图获取我的本地文件的气泡图，即myfile.geojson。我试过的代码是在plunker链接中。我想根据价值＆＃34;利润＆＃34;绘制气泡图。在谷歌和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; });

请小心地看一下代码中的代码。

工作代码here。

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

1 个答案: