我是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');