如何使用d3调整svg路径命令A(椭圆弧)的值?

时间:2019-04-29 05:37:48

标签: d3.js svg

我是d3.js的初学者。当我尝试绘制一组圆弧时,每个圆弧之间似乎有一条窄线。我设置了.attr('stroke-width','0')。但是,这与中风无关。我检查了一条弧线,路径数据为

<path transform="rotate(-270)" class="node node--root" d="M5.640042262694442,44.64515565293754A45,45,0,0,0,8.432205445549114,44.20291745263034L7.905192605202295,41.44023511184094A42.1875,42.1875,0,0,1,5.28753962127604,41.85483342462894Z" fill="#FA6400C6" stroke="#FA6400C6" stroke-width="0"></path>

我暂时将上述路径命令L值从L7.905192605202295,41.44023511184094A42.1875,42.1875,0,0,1,5.28753962127604,41.85483342462894Z修改为L7.905192605202295,41.44023511184094A42.1875,42.1875,0,0,0,5.28753962127604,41.85483342462894Z
弧之间就没有线了。如何永久更改每个路径?

Click here to see result 我的弧函数是




                    var arc=d3.arc()
                             .innerRadius(function (d) { return radiusScale(d.innerRad) })
                             .outerRadius(function (d) { return radiusScale(d.outerRad) })
                             .startAngle(function (d) { return -(d.startAngle*Math.PI/180)})
                             .endAngle(function (d) { return -(d.endAngle*Math.PI/180)});
                        group.selectAll("arc").data(dataset).enter().append("path").attr('transform','rotate(-270)')
                                    .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
                                    .on("mouseover", function(d){return tooltip.html("<p>Segment:<strong>"+d.seg+"</strong><br/>Color value:<strong>"+d.colorVal+"</strong><br/>Color code:<strong>"+d.color+"</strong><br/>Start Angle:<strong>"+d.startAngle+"</strong><br/>End Angle:<strong>"+d.endAngle+"</strong><br/>Outer Radius:<strong>"+d.outerRad+"</strong><br/>Inner Radius:<strong>"+d.innerRad+"</strong><br/><br/><input type='color' value='"+d.colorWithoutTransp+"' style='width:100%;height:30px;'/></p>").style("visibility", "visible");})
                                    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
                                    .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
                                    .attr("d",arc)
                                    .attr('fill',function(d){return d.color})
                                    .attr('stroke',function(d){return d.color})
                                    .attr('stroke-width','0');



0 个答案:

没有答案