使用flare.csv（不是flare.json）的D3可缩放圆形包装

【问题标题】：D3 zoomable circle packing using flare.csv (not flare.json)使用flare.csv（不是flare.json）的D3可缩放圆形包装
【发布时间】：2017-11-13 02:33:29
【问题描述】：

我正在尝试修改 Mike Bostok 的可缩放圆形包装 https://bl.ocks.org/mbostock/7607535 以便它使用 CSV 文件而不是 json 文件；对于不可缩放的版本： https://bl.ocks.org/mbostock/ca5b03a33affa4160321

正在从高速数据库 (SAP HANA) 返回数据。返回格式化的 json 比返回模拟 CSV 的格式复杂得多，因此我将 D3 Packed Circles（使用 CSV 格式数据）的 D3 示例与 D3 Zoomable Packed Circle（使用 json 格式数据）合并。我的问题就从这里开始了。我是 D3 的新手。

我无法合并这两个版本以使 zoom() 和 zoomTo() 函数正常工作 - 在调用 zoomTo() 之后。这与根或节点的定义有关 - 但我无法弄清楚“节点” zoomTo() 的定义是如何预期的

尝试合并的 jsfiddle 在这里： https://jsfiddle.net/LbLpcjr4/17/

我注释掉了 zoomTo() - 取消注释此行以查看我正在尝试解决的问题：

//zoomTo(nodecircles,[root.x, root.y, root.r * 2 + margin]);

Thsi 使用 GDELT 的数据显示 2017 年跨国公司的新闻文章数量，按国家/地区分组。

任何建议表示赞赏！

【问题讨论】：

  • 有人吗？我无法找到正确的方法来做到这一点......

标签： csv d3.js


【解决方案1】：

到目前为止，我设法修复了缩放，但我打破了居中：

带着脏

svg.select("g").attr("transform","translate("+(width/2)+","+(height/2)+")")

第 114 行它“修复”它

https://jsfiddle.net/LbLpcjr4/39/ 我声明了nodecircles 和circle 并将zoomTo 更改为：

  function zoomTo(v) {
            nodecircles   =  svg.select("g").selectAll("g")
            circle   = svg.selectAll("circle");
            var k = diameter / v[2]; view = v;
            nodecircles.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
            circle.attr("r", function(d) { return d.r * k; });
        }

【讨论】：

    【解决方案2】：

    我对此有一些经验。 我把我的项目代码留给你（在 xampp 中执行）

    <!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.node--hover circle {
  stroke: #000;
  stroke-width: 1.2px;
}

.node {
  cursor: pointer;
}

.node:hover {
/*   stroke: #000;
  stroke-width: 0.5px; */
  opacity: 0.3;
}

.node--leaf {
  fill: #fff;
}

.label {
  font: 12px "Maison Neue", Helvetica, Arial, sans-serif;
  text-anchor: middle;
/*   text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; */
}

.label,
.node--root,
.node--leaf {
  pointer-events: none;
}

</style>
<svg width="960" height="960"><g transform="translate(1,1)"></g></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    margin = 1,
    diameter = +svg.attr("width"),
    g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var format = d3.format(",d");

var color = d3.scaleLinear()
    .domain([-1, 10])
    .range(["rgb(200,80,77)", "rgb(245,255,255)"])
    .interpolate(d3.interpolateHcl);

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

var pack = d3.pack()
    .size([width - margin, height - margin])
    .padding(1);

d3.csv("./Visualise.csv", function(error, data) {
  if (error) throw error;

  var root = stratify(data)
      .sum(function(d) { return d.value; })
      .sort(function(a, b) { return b.value - a.value; });

  var focus = root,
      nodes = pack(root).descendants(),
      view;

  var circle = g.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
      .attr("class", function(d) { 
        return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; 
        })
      .style("fill", function(d) { 
            if(d.data.value == 0){
                return color(d.depth-1);
            }
            return d.children ? color(d.depth) : null; 
        })
      .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });

  var text = g.selectAll("text")
    .data(nodes)
    .enter().append("text")
      .attr("class", "label")
      .style("fill-opacity", function(d) { 
        if(d.data.value == 0){return 0;}
        return d.parent === root ? 1 : 0; })
      .style("display", function(d) {
        if( d.data.value == 0 || d.data.value == "" ) {return "none";} 
        return d.parent === root ? "inline" : "none"; })
      .text(function(d) { 
        if(d.data.value == 0){return;};

        return d.data.id.split(".").pop(-1) + "\n:\n"+ format(d.data.value); });//////

  var node = g.selectAll("circle,text");

  svg
      .style("background", color(-1))
      .on("click", function() { zoom(root); });

  zoomTo([root.x, root.y, root.r * 2 + margin]);

  function zoom(d) {
    var focus0 = focus; focus = d;

    var transition = d3.transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .tween("zoom", function(d) {
          var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
          return function(t) { zoomTo(i(t)); };
        });

    transition.selectAll("text")
      .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
        .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
        .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
        .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
  }

  function zoomTo(v) {
    var k = diameter / v[2]; view = v;
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", function(d) { return d.r * k; });
  }
});


</script>
//////visualise.csv
level,CategoryID,CategoryParentID,value,CategoryCount,id
0,-1,0,10000000,1000000,Cat
1,1,-1,263752,173805,Cat.egory_1
2,12,20081,0,0,Cat.egory_29.Leaf_1
3,13,50693,2470,337,Cat.egory_13.Leaf_2.Leaf_1
4,14,13,0,0,Cat.egory_13.Leaf_2.Leaf_1.Leaf_1
5,18,2735,0,0,Cat.egory_13.Leaf_2.Leaf_1.Leaf_11.Leaf_1
5,22,2705,0,0,Cat.egory_13.Leaf_2.Leaf_1.Leaf_8.Leaf_1
5,23,1020,0,0,Cat.egory_13.Leaf_2.Leaf_1.Leaf_5.Leaf_1
3,24,18875,3017,440,Cat.egory_13.Leaf_1.Leaf_1
4,25,24,0,0,Cat.egory_13.Leaf_1.Leaf_1.Leaf_1
4,26,24,0,0,Cat.egory_13.Leaf_1.Leaf_1.Leaf_2
3,27,18875,1173,227,Cat.egory_13.Leaf_1.Leaf_2
3,28,1430,0,0,Cat.egory_1.Leaf_21.Leaf_1
3,30,717,0,0,Cat.egory_3.Leaf_5.Leaf_1
3,31,386,5,5,Cat.egory_4.Leaf_2.Leaf_1
4,32,326,0,0,Cat.egory_4.Leaf_1.Leaf_1.Leaf_1
3,33,940,0,0,Cat.egory_1.Leaf_16.Leaf_1
2,34,1,3527,811,Cat.egory_1.Leaf_1
4,35,13623,0,0,Cat.egory_1.Leaf_1.Leaf_13.Leaf_1
3,36,34,616,84,Cat.egory_1.Leaf_1.Leaf_1
5,37,35692,0,0,Cat.egory_1.Leaf_1.Leaf_1.Leaf_16.Leaf_1
5,38,13600,0,0,Cat.egory_1.Leaf_1.Leaf_1.Leaf_13.Leaf_1
3,39,34,677,221,Cat.egory_1.Leaf_1.Leaf_2
4,40,39,0,0,Cat.egory_1.Leaf_1.Leaf_2.Leaf_1
5,41,156204,0,0,Cat.egory_1.Leaf_1.Leaf_2.Leaf_2.Leaf_1
6,42,35672,0,0,Cat.egory_1.Leaf_1.Leaf_2.Leaf_2.Leaf_20.Leaf_1
3,44,593,64,64,Cat.egory_1.Leaf_11.Leaf_1
4,48,14281,0,0,Cat.egory_1.Leaf_35.Leaf_2.Leaf_1
2,51,64482,2797,323,Cat.egory_33.Leaf_1
3,52,51,0,0,Cat.egory_33.Leaf_1.Leaf_1
4,53,27259,0,0,Cat.egory_33.Leaf_1.Leaf_10.Leaf_1
3,56,51,0,0,Cat.egory_33.Leaf_1.Leaf_2
2,57,45100,388,132,Cat.egory_31.Leaf_1
3,58,57,0,0,Cat.egory_31.Leaf_1.Leaf_1
4,59,32987,0,0,Cat.egory_31.Leaf_1.Leaf_5.Leaf_1
3,60,57,1,1,Cat.egory_31.Leaf_1.Leaf_2
5,61,108726,0,0,Cat.egory_31.Leaf_1.Leaf_4.Leaf_8.Leaf_1
2,63,1,15791,5506,Cat.egory_1.Leaf_2
3,64,63,0,0,Cat.egory_1.Leaf_2.Leaf_1
3,65,63,0,0,Cat.egory_1.Leaf_2.Leaf_2
3,66,63,175,52,Cat.egory_1.Leaf_2.Leaf_3
4,67,66,0,0,Cat.egory_1.Leaf_2.Leaf_3.Leaf_1
4,68,66,78,78,Cat.egory_1.Leaf_2.Leaf_3.Leaf_2
4,69,66,0,0,Cat.egory_1.Leaf_2.Leaf_3.Leaf_3
4,70,66,34,34,Cat.egory_1.Leaf_2.Leaf_3.Leaf_4
4,71,66,0,0,Cat.egory_1.Leaf_2.Leaf_3.Leaf_5
3,73,63,2002,144,Cat.egory_1.Leaf_2.Leaf_4
4,74,73,0,0,Cat.egory_1.Leaf_2.Leaf_4.Leaf_1
5,75,32723,0,0,Cat.egory_1.Leaf_2.Leaf_4.Leaf_8.Leaf_1
4,76,73,1,1,Cat.egory_1.Leaf_2.Leaf_4.Leaf_2
4,77,900,0,0,Cat.egory_1.Leaf_2.Leaf_7.Leaf_1
3,79,63,6,6,Cat.egory_1.Leaf_2.Leaf_5
3,80,63,447,447,Cat.egory_1.Leaf_2.Leaf_6
3,81,13905,2115,145,Cat.egory_1.Leaf_32.Leaf_1
4,82,81,0,0,Cat.egory_1.Leaf_32.Leaf_1.Leaf_1
6,83,38140,0,0,Cat.egory_1.Leaf_32.Leaf_1.Leaf_4.Leaf_3.Leaf_1
5,84,4049,0,0,Cat.egory_1.Leaf_32.Leaf_1.Leaf_5.Leaf_1
4,86,27,0,0,Cat.egory_13.Leaf_1.Leaf_2.Leaf_1
4,87,24,34,34,Cat.egory_13.Leaf_1.Leaf_1.Leaf_3
4,88,24,0,0,Cat.egory_13.Leaf_1.Leaf_1.Leaf_4
4,89,27,64,64,Cat.egory_13.Leaf_1.Leaf_2.Leaf_2
4,90,27,21,21,Cat.egory_13.Leaf_1.Leaf_2.Leaf_3
4,91,24,1,1,Cat.egory_13.Leaf_1.Leaf_1.Leaf_5
4,92,24,139,139,Cat.egory_13.Leaf_1.Leaf_1.Leaf_6
4,93,24,12,12,Cat.egory_13.Leaf_1.Leaf_1.Leaf_7
4,95,24,10,10,Cat.egory_13.Leaf_1.Leaf_1.Leaf_8
4,96,27,155,155,Cat.egory_13.Leaf_1.Leaf_2.Leaf_4
5,97,13779,0,0,Cat.egory_1.Leaf_29.Leaf_37.Leaf_29.Leaf_1

    【讨论】：

      猜你喜欢
      • 2018-09-20
      • 1970-01-01
      • 2015-07-22
      • 1970-01-01
      • 2015-08-16
      • 1970-01-01
      • 2015-01-18
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode