2

我正在寻找一种在使用圆形包装布局以允许标记非叶节点时在父节点和子节点之间添加填充的方法。这是为了允许标记中间节点，因为只标记示例中的引导节点，http ://strongriley.github.io/d3/ex/pack.html 不会公开我想要的信息级别。

目前我正在制作这个 jsfiddle，http://jsfiddle.net/rJC2E/。但正如您所看到的，中间标签重叠。目前我的半径只是使用以下代码设置

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

我试图通过乘以 0.9 来改变半径，等等，但这并没有导致我正在寻找的结果。咖啡脚本中的当前代码是：

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

谢谢，

4

0 回答 0