D3JS打包圈布局,填充与父级相关

时间:2013-04-15 06:59:16

标签: javascript d3.js padding circle-pack

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

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

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

谢谢,

0 个答案:

没有答案