Javascript D3JS填充圆布局,相对于父级填充

Javascript D3JS填充圆布局,相对于父级填充,javascript,d3.js,padding,circle-pack,Javascript,D3.js,Padding,Circle Pack,我正在寻找一种方法,在使用圆形填充布局允许标记非叶节点时,在父节点和子节点之间添加填充。这是为了允许标记中间节点,因为如示例所示,仅标记lead节点,不会公开我想要的信息级别 目前我正在制作这个JSFIDLE。但正如您所看到的,中间标签重叠。目前,我的半径仅使用以下代码设置 node.append("circle") .attr("r", (d) -> d.r) 我试图通过乘以.9等方法来改变半径,但这并没有得到我想要的结果。coffeescri

我正在寻找一种方法,在使用圆形填充布局允许标记非叶节点时,在父节点和子节点之间添加填充。这是为了允许标记中间节点,因为如示例所示,仅标记lead节点,不会公开我想要的信息级别

目前我正在制作这个JSFIDLE。但正如您所看到的,中间标签重叠。目前,我的半径仅使用以下代码设置

 node.append("circle")
                    .attr("r", (d) -> d.r)
我试图通过乘以.9等方法来改变半径,但这并没有得到我想要的结果。coffeescript中的当前代码为:

        d3.json("/distilleries.json", (dat) ->
            svgRoot = d3.select('body')
                    .append("svg").attr("width", "100%").attr("height",1000)
                    .append('g')
                    .attr("transform", "translate(200,200)")

            diameter = 900
            format = d3.format(",d")

            pack = d3.layout.pack()
                    .size([diameter - 100, diameter - 100])
                    .value((d) -> d.size)
                    .padding(10)

            node = svgRoot.datum(dat).selectAll(".node")
                    .data(pack.nodes)
                    .enter()
                    .append("g")
                    .attr("offsetWidth", 20)
                    .attr("class", (d) -> if d.children then "node" else "leaf node")
                    .attr("transform", (d) -> "translate(" + d.x + "," + d.y + ")")

            node.append("circle")
                    .attr("r", (d) -> d.r)

            arc = d3.svg.arc()
                    .innerRadius((d,i) -> d.r - 1)
                    .outerRadius((d) -> d.r)
                    .startAngle(0)
                    .endAngle(2 * Math.PI)


            node.filter((d) -> d.children)
                    .append("path")
                    .style("visibility", "hidden")
                    .attr("id", (d,i) -> "p"+i)
                    .attr("d", arc)

            node.filter((d)-> d.children )
                    .append("text")
                    .append("textPath")
                    .attr("textLength", (d,i) -> 100 )
                    .attr("xlink:href", (d, i) -> console.log(d.name + i); "#p" + i)
                    .attr("startOffset", (d) -> Math.random()*(0.2 - 0.15) + 0.15)
                    .attr("dy", (d) -> if d.children then - d.r else ".3em")
                    .style("text-anchor", "middle")
                    .text((d) -> d.name)
                    .attr("class", (d) -> 
                                    d.class 
                    )
            node.filter((d)-> !(d.children) )
                    .append("text")
                    .style("text-anchor", "middle")
                    .text((d, i) -> d.name)
            )

谢谢,

如果您发布了用于生成图表的实际代码,那么提供帮助将比查看生成的HTML.Done更容易。谢谢你让我知道。我认为从成品中告诉我一些方法会更容易,并且我会反向使用代码。希望这会更好。您是否尝试过类似于parent(填充容器(child-1,child-2,…,child-n))的结构?填充容器将是父容器中较小尺寸的单个圆。我想当你将半径调整0.9时,打包算法将使用较小的半径重新打包。科林,你能不能更具体一点,我不确定我是否理解填充容器的部分,那会在哪里?你在缩放半径方面绝对是正确的,这会影响到每一件事。也许我应该看看从下往上扩展包围圈的半径?