D3使用flare.csv（非flare.json）的可缩放圆形填充

我试图修改迈克·博斯托克的可缩放圆形包装 因此它使用CSV文件而不是json文件；不可缩放版本的s：

数据正从高速数据库（SAP HANA）返回。返回格式化的json比返回模仿CSV的格式要复杂得多，因此我将D3压缩圆（使用CSV格式数据）的D3示例与D3可缩放压缩圆（使用json格式数据）合并。我的问题就从这里开始。我是D3新手

调用zoomTo（）后，我无法合并这两个版本以使zoom（）和zoomTo（）函数正常工作。这与根或节点的定义有关，但我无法理解“node”zoomTo（）的定义期望的是什么

尝试合并的JSFIDLE如下所示：

我注释掉了zoomTo（）-取消注释这一行以查看我试图修复的问题：

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

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

---

任何建议，谢谢

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

带着脏衣服

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

第114行“修复”它

我声明了

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; });
        }

---

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

带着脏衣服

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

第114行“修复”它

我声明了

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; });
        }

---

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

正文{
字体：10px无衬线；
文本锚定：中间；
}
.node—悬停圆{
行程：#000；
笔画宽度：1.2px；
}
.节点{
光标：指针；
}
.节点：悬停{
/*行程：#000；
笔划宽度：0.5px*/
不透明度：0.3；
}
.node—叶{
填充：#fff；
}
.标签{
字体：12px“Maison Neue”，Helvetica，Arial，无衬线；
文本锚定：中间；
/*文本阴影：01px0#fff，1px0#fff，-1px0#fff，0-1px0#fff*/
}
.标签，
.node—根，
.node—叶{
指针事件：无；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
保证金=1，
直径=+svg.attr（“宽度”），
g=svg.append（“g”）.attr（“转换”、“转换”（+diameter/2+），“+diameter/2+”）；
var format=d3.format（“，d”）；
var color=d3.scaleLinear（）
.domain（[-1,10]）
.范围（[“rgb（200,80,77）”，“rgb（245255255）”）
.插值（d3.插值EHCL）；
var stratify=d3.stratify（）
.parentId（函数（d）{返回d.id.substring（0，d.id.lastIndexOf（“.”）；}）；
var pack=d3.pack（）
.尺寸（[宽度-边距，高度-边距]）
.填充（1）；
d3.csv（“./visualize.csv”），函数（错误、数据）{
如果（错误）抛出错误；
变量根=分层（数据）
.sum（函数（d）{返回d.value；}）
.sort（函数（a，b）{返回b.value-a.value；}）；
var focus=root，
nodes=pack（root）.subjections（），
看法
变量循环=g.selectAll（“循环”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“类”，函数（d）{
返回d.parent？d.children？“node”：“node-node--leaf”：“node-node--root”；
})
.style（“填充”，函数（d）{
如果（d.data.value==0）{
返回颜色（d.depth-1）；
}
返回d.children？颜色（d.depth）：空；
})
.on（“单击”，函数（d）{if（focus！==d）zoom（d），d3.event.stopPropagation（）；}）；
var text=g.selectAll（“文本”）
.数据（节点）
.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.style（“填充不透明度”，函数（d）{
如果（d.data.value==0）{返回0；}
返回d.parent==根（1:0；}）
.样式（“显示”，功能（d）{
如果（d.data.value==0 | | d.data.value==“”）{返回“无”}
返回d.parent==根？“内联”：“无”；}）
.text（功能（d）{
如果（d.data.value==0）{return；}；
返回d.data.id.split（“.”.pop（-1）+“\n:\n”+格式（d.data.value）；}）//////
var node=g.selectAll（“圆圈，文本”）；
svg
.样式（“背景”，颜色（-1））
.on（“单击”，函数（）{zoom（root）；}）；
zoomTo（[root.x，root.y，root.r*2+margin]）；
功能缩放（d）{
var focus0=焦点；焦点=d；
var transition=d3.transition（）
.持续时间（d3.event.altKey？7500:750）
.tween（“缩放”，功能（d）{
var i=d3.interpolateZoom（视图，[focus.x，focus.y，focus.r*2+边距]；
返回函数（t）{zoomTo（i（t））；}；
});
转换。选择全部（“文本”）
.filter（函数（d）{return d.parent==focus | | this.style.display===“inline”}）
.style（“填充不透明度”，函数（d）{return d.parent==focus？1:0；}）
.on（“开始”，函数（d）{if（d.parent==focus）this.style.display=“inline”}）
.on（“end”，函数（d）{if（d.parent！==focus）this.style.display=“none”；}）；
}
函数zoomTo（v）{
变量k=直径/v[2]；视图=v；
attr（“transform”，函数（d）{return”translate（“+（d.x-v[0]）*k+”，“+（d.y-v[1]）*k+”）；）；
circle.attr（“r”，函数（d）{返回d.r*k；}）；
}
});
//////visualize.csv
级别，CategoryID，CategoryParentID，值，CategoryCount，id
0，-1,0100000001000000，类别
1,1，-1263752173805，第1类
2,1220081,0,0，类别利己主义者29.Leaf_1
3,13506932470337，Cat.egory_13.Leaf_2.Leaf_1
4,14,13,0,0，Cat.egory_13.Leaf_2.Leaf_1.Leaf_1
5,182735,0,0，Cat.egory_13.Leaf_2.Leaf_1.Leaf_11.Leaf_1
5,222705,0,0，Cat.egory_13.Leaf_2.Leaf_1.Leaf_8.Leaf_1
5,231020,0,0，Cat.egory_13.Leaf_2.Leaf_1.Leaf_5.Leaf_1
3,24188753017440，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,27188751173227，Cat.egory_13.Leaf_1.Leaf_2
3,281430,0,0，Cat.egory_1.Leaf_21.Leaf_1
3,30717,0,0，Cat.egory_3.Leaf_5.Leaf_1
3,31386,5,5，第四类